Tricky меню (HTML + CSS) для шаблона WordPress

Question

Таким образом, мы имеем выше меню. Это нужно для создания шаблона WordPress. Я понятия не имею, как сделать зависание и активные состояния. Недо теперь у меня есть это:

HTML (а затем, как WordPress будет генерировать код):

<nav id="nav-main" role="navigation"> 
    <div class="menu-primary-navigation-container"> 
     <ul id="menu-primary-navigation" class="menu"> 
      <li> 
       <a href="#" title=""> 
        Home 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
     </ul><!-- #menu-primary-navigation --> 
    </div><!-- .menu-primary-navigation-container --> 
</nav><!-- #access --> 

Тогда я имею CSS:

#nav-main { 
    width: 956px; 
    height: 44px; 
    border: 1px solid #a5a5a5; 
    background: url(images/bg-nav-main.jpg) repeat-x; 
} 
    .menu-primary-navigation-container {} 
     #menu-primary-navigation { 
      margin: 0; 
      padding: 0; 
      list-style-type: none; 
     } 
      #menu-primary-navigation li { 
       height: 44px; 
       display: inline-block; 
      } 
       #menu-primary-navigation li a { 
        color: #ffffff; 
        font-family: Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        font-size: 16px; 
        text-decoration: none; 
        line-height: 44px; 
        padding: 0 46px; 
       } 
        #menu-primary-navigation li a:hover {} 

И это все. Здесь я застрял. Эти косые черты - плохие точки этого меню.

Любые идеи?

Answer 1

сделать графики таким образом:

Желтый представляет прозрачный цвет. Затем добавьте отрицательный запас в <li>, чтобы они были рядом друг с другом без пробелов.

Answer 2

Для того, чтобы активное состояние, вы должны добавить некоторые PHP в меню, чтобы проверить текущий сайт:

<nav id="nav-main" role="navigation"> 
<div class="menu-primary-navigation-container"> 
    <ul id="menu-primary-navigation" class="menu"> 
     <li <?php if (is_page('home')) { echo "class='active'"; }?> > 
      <a href="#" title=""> 
       Home 
      </a> 
     </li> 
     <li <?php if (is_page('menulink')) { echo "class='active'"; }?> > 
      <a href="#" title=""> 
       Menu Link 
      </a> 
     </li> 

Для получения более подробной информации читайте этот учебник здесь: Tutorial

Тогда вы должны сделать прямоугольное изображения для каждой кнопки и определить его для элементов <li> в качестве фона. Вы также можете сделать один для всех элементов меню. С «активным» классом, который настраивается wordpress, вы можете определить другой фон для активного элемента меню.

Для висения элементов меню вы просто должны добавить определение фона в CSS для #menu-primary-navigation li a:hover {}