0

http://www.backcountry.com/のように幅が柔軟で、カテゴリを表示するために拡張ナビゲーションが必要なサイトに取り組んでいますが、柔軟で 2 つではなく 3 つのレベルがあります。

問題は、サイズをピクセル幅ではなく % に変更すると、ナビゲーション バー全体の 100% ではなく、その上の親 li の 100% だけになることです。

マークアップはhttp://jsfiddle.net/lfischer/L6CGj/にありますが、簡略化されたバージョンは次のとおりです。

<div id="nav">
<ul>
  <li><a href="">Primary</a>
    <ul>
      <li><a href="">Secondary</a>
        <div class="tertiary_nav">
          <ul>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
          </ul>
          <ul>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
          </ul>  
        </div>
      </li>
      <li><a href="">Secondary</a>
         <div class="tertiary_nav">
          <ul>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
          </ul>
          <ul>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
            <li><a href="">Tertiary</a></li>
          </ul>  
        </div>  
      </li>
    </ul>  
  </li>
</ul>
</div>

CSS:

/* primary nav */
#nav { position: relative; }
#nav > ul { list-style: none; margin: 0 3%; padding: 0; float: left; width: 94%; }
#nav > ul > li { float: left; padding: 0; margin: 0; position: relative; }
#nav > ul > li a { display: block;  }

/* simple drop down */
#nav > ul > li > ul { position: absolute; margin: 0; padding: 0 0 0.5em 0; display: none; z-index: 9999; list-style: none; }
#nav > ul > li > ul > li { clear: left; position: relative; width: 200px; padding: 0;}
#nav > ul > li > ul > li a { padding: 0.3em 1em; line-height: 1.1em;  }
#nav > ul > li > ul > li ul { list-style: none; }

/* extended drop down second level */
#nav > ul > li.extended_sub_nav { position: inherit; }
#nav > ul > li.extended_sub_nav > ul { position: absolute; left: 3%; margin: 0; padding: 0; z-index: 9999; list-style: none; width: 94%; height: 2.6em; display: block;}
#nav > ul > li.extended_sub_nav > ul > li { float: left; clear: none; width: auto; padding: 0; position: inherit;}
#nav > ul > li.extended_sub_nav > ul > li > a { padding: 0.5em 0.8em; line-height: 1.5em;  }

/* extended drop down third level */
#nav > ul > li.extended_sub_nav > ul > li .tertiary_nav { width: 950px; float: left; position: absolute; padding: 1em 3% 1em; display: block; }
#nav > ul > li.extended_sub_nav > ul > li  ul { /*display:none*/ ; width: 18%; float: left; padding: 0 0 0.5em 5%; margin: 0 1% 0.5em 1%; list-style: none; min-height: 8em; }
#nav > ul > li.extended_sub_nav > ul > li  ul a { padding: 0.1em 0; }
#nav > ul > li.extended_sub_nav > ul > li  a:hover { text-decoration: underline }
#nav > ul > li.extended_sub_nav > ul > li  ul li { padding: 0; }

#nav ul > li:hover > ul, #nav > ul > li.extended_sub_nav > ul > li:hover  ul, #nav > ul > li.extended_sub_nav > ul > li:hover .tertiary_nav { display: block; }

3 番目の ul は 18% 幅で、列と表示の一部を作成します。テストを容易にするために編集またはコメントアウトされているものはありません。

4

0 に答える 0