0

我正在开发一个宽度灵活且需要扩展导航来显示类别的网站，例如在http://www.backcountry.com/上，但灵活且具有三个级别而不是两个级别。

问题是，如果我将大小更改为 % 而不是设置像素宽度，则它只是其上方父 li 的 100%，而不是整个导航栏的 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; }

三级 ul 的宽度为 18%，用于创建列和一些显示：为了便于测试，没有编辑或注释掉任何内容。

4

0 回答 0