WordPressテンプレートのトリッキーなメニュー（HTML + CSS）

Question

私たちは上記のメニューを用意しています。私はWordPressのテンプレートのために構築する必要があること。私はどのようにホバーとアクティブな状態を作るのか分かりません。その後、私はCSS持っ

<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 --> 

：

#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 {} 

をそして、これがすべてである

HTML（はWordPressのコードを生成する方法に続い）：今、私はこれを持っているそれまでは。ここで私はくっついている。これらのスラッシュはこのメニューの悪い点です。

アイデア？

黄色が透明色を表す：

Answer 1

は、グラフィックス、そのようにしてください。 次に、<li>に負のマージンを追加して、スペースを置かずに隣り合うようにします。そして、あなたは長方形をしなければならないTutorial

を：ここにこのチュートリアルを読んで詳細については

<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> 

：あなたは現在のサイトをチェックして、メニューにいくつかのPHPを追加する必要がアクティブな状態を作るために

Answer 2

イメージを各menubuttonに対して定義し、要素として<li>をバックグラウンドとして定義します。また、すべてのメニュー要素に対して1つを作成することもできます。 wordpressによって設定される 'active'クラスでは、アクティブなメニュー要素に異なる背景を定義できます。あなただけ #menu-primary-navigation li a:hover {}