简化全宽导航栏

时间：2014-09-05 15:33:12

标签： html css drop-down-menu

我创建了一个带有下拉列表的导航栏，悬停时出现。导航栏居中并嵌套在相同高度和宽度为100％的div中。我想弄了如何让导航栏扩展整个宽度，同时保持项目居中而不诉诸父div。导航栏正确地嵌套在IE10 / Chrome / Firefox中，但不在jsfiddle中。

我想稍微清理一下代码。我去为导航器添加了一个z索引，因为下拉列表只会在chrome / jsfiddle中间歇显示

HTML：

<div id="wrap"> 
<nav>
    <ul>
        <li><a href="#">Home</a></li>
         <li><a href="about.html" Title="About US">About</a></li>
         <li><a href="episodes.html" Title="Episode Guide">Episodes</a>
            <ul>
                <li><a>Latest Episodes:</a></li>
               <li><a href="episodes.html#Episode16">Episode 16</a></li>
               <li><a href="episodes.html#Episode17">Episode 17</a></li>
               <li><a href="episodes.html#Episode18">Episode 18</a></li>
               <li><a href="episodes.html#Episode19" Title="Coming Soon...">Episode 19</a></li>
            </ul>         
         </li>
         <li><a href="#" Title="Underwriters">Underwriters</a></li>
         <li><a href="PSA.html" Title="PSA Partners">PSA Partners</a></li>
         <li><a>Donate</a>
            <ul>
               <li><a>[PAYPAL GOES HERE]</a></li>
            </ul>         
         </li>
         <li style="border-right:0px"><a>Contact</a>
            <ul>
               <li><a>[COMPANY NAME]<bR>[ADDRESS}<br>Omaha, Nebraska 68164</a></li>
               <li><a href="tel:555-1212">Phone: 555-1212</a></li> 
               <li><a href="mailto:info@website.org?Subject=Inquiry" target="_top">Email: info@website.org</a></li>
            </ul>
        </li>
    </ul>    
</nav>

CSS：

#wrap {
    height:42px;
    background-color:#281E67;
    position:absolute;
    width:100%;
    z-index: 3;
}
nav {
    margin: 0 auto;
    text-align: center;
    z-index: 999;
}
nav ul ul {
    display: none;
    z-index:999;
}
nav ul li:hover > ul {
    display: block;
    z-index:999;
}
nav ul {
    background: #281E67;
    padding: 0 30px;
    list-style: none;
    position: static;
    display: inline-table;
    z-index:999;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
    border-right:1px solid rgba(76, 76, 255, .4);
    z-index:999;
}
nav ul li:hover {
    background: -webkit-linear-gradient(top, #3E2E9E, #2E2276);
    /* For Safari 5.1 to      6.0 */
    background: -o-linear-gradient(top, #3E2E9E, #2E2276);
    /* For Opera 11.1 to 12.0 */
    background: linear-gradient(top, #3E2E9E, #2E2276);
    /* Standard syntax */
    background:-moz-linear-gradient(top, #3E2E9E, #2E2276);
    z-index:999;
}
nav ul li:hover a {
    color: #fff;
    z-index:999;
}
nav ul li a {
    display: block;
    padding: 11px 40px;
    /*---navbar height---*/
    color: #FFF;
    text-decoration: none;
    z-index:999;
}
nav ul ul {
    background: #281E67;
    border-radius: 0px;
    padding: 0;
    position:absolute;
    top: 100%;
    z-index:999;
}
nav ul ul li {
    float: none;
    border-bottom: 1px solid rgba(76, 76, 255, .4);
    white-space: nowrap;
    z-index:999;
}
nav ul ul li a {
    padding: 10px 30px;
    color: #fff;
    z-index:999;
}
nav ul ul li a:hover {
    background: #281E67;
    background: -webkit-linear-gradient(top, #3E2E9E, #2E2276);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, #3E2E9E, #2E2276);
    /* For Opera 11.1 to 12.0 */
    background: linear-gradient(top, #3E2E9E, #2E2276);
    /* Standard syntax */
    background:-moz-linear-gradient(top, #3E2E9E, #2E2276);
    z-index:999;
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
    z-index:999;
}

这是jsfiddle

2 个答案:

答案 0 :(得分：1)

您需要做的是在下拉列表中添加width: 100%和display: block。 我已经清理了一点代码。

这是HTML 

<div id="wrap"> 
<nav>
    <ul class="mainNavigation">
        <li><a href="#">Home</a></li>
         <li><a href="about.html" Title="About View Point">About</a></li>
         <li><a href="episodes.html" Title="Episode Guide">Episodes</a>
            <ul class="subNavigation">
                <li><a>Latest Episodes:</a></li>
               <li><a href="episodes.html#Episode16">Episode 16</a></li>
               <li><a href="episodes.html#Episode17">Episode 17</a></li>
               <li><a href="episodes.html#Episode18">Episode 18</a></li>
               <li><a href="episodes.html#Episode19" Title="Coming Soon...">Episode 19</a></li>
            </ul>         
         </li>
         <li><a href="#" Title="Underwriters">Underwriters</a></li>
         <li><a href="PSA.html" Title="PSA Partners">PSA Partners</a></li>
         <li><a>Donate</a>
            <ul>
               <li><a>[PAYPAL]</a></li>
            </ul>         
         </li>
         <li style="border-right:0px"><a>Contact</a>
            <ul>
               <li><a>[SITE]<bR>[ADDRESS]<br>Omaha, Nebraska 68164</a></li>
               <li><a href="tel:402-555-1212">Phone: 402-555-1212</a></li> 
               <li><a href="mailto:info@website.org?Subject=Inquiry" target="_top">Email: info@website.org</a></li>
            </ul>
        </li>
    </ul>    
</nav>
</div>

这里是CSS 

#wrap{
height:41.5px;
background-color:#281E67;
position:absolute;
width:100%;
z-index: 3;
}
nav {
margin: 0 auto; 
text-align: center;
z-index: 999;
}
nav ul ul {
display: none;
z-index:999;
background: #281E67; border-radius: 0px; padding: 0;
position:absolute; top: 100%;
z-index:999;
}
nav ul li:hover > ul {
    display: block;
    z-index:999;
}
nav ul.mainNavigation {
background: #281E67; 
padding: 0 30px;  
list-style: none;
position: static;
display: inline-table;
z-index:999;
width: 100%;
}
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    /*float: left;*/
    display:inline-block;
    border-right:1px solid rgba(76,76,255,.4);
    z-index:999;
}
    nav ul li:hover {
    background: -webkit-linear-gradient(top, #3E2E9E, #2E2276); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, #3E2E9E, #2E2276);/* For Opera 11.1 to 12.0 */
    background: linear-gradient(top, #3E2E9E, #2E2276);/* Standard syntax */
    background:-moz-linear-gradient(top, #3E2E9E, #2E2276);
    z-index:999;
    }
        nav ul li:hover a {
            color: #fff;
            z-index:999;
        }

    nav ul li a {
        display: block; padding: 11px 40px; /*---navbar height---*/
        color: #FFF; text-decoration: none;
        z-index:999;
    }
    nav ul ul li {
        display:block;
        float: none; 
        border-bottom: 1px solid rgba(76,76,255,.4);
        white-space: nowrap;
        z-index:999;
    }
        nav ul ul li a {
            padding: 10px 30px;
            color: #fff;
            z-index:999;
        }   
            nav ul ul li a:hover {
                background: #281E67;
                background: -webkit-linear-gradient(top, #3E2E9E, #2E2276); /* For Safari 5.1 to 6.0 */
                background: -o-linear-gradient(top, #3E2E9E, #2E2276);/* For Opera 11.1 to 12.0 */
                background: linear-gradient(top, #3E2E9E, #2E2276);/* Standard syntax */
                background:-moz-linear-gradient(top, #3E2E9E, #2E2276);
                z-index:999;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
    z-index:999;
}

查看jsfiddle。

http://jsfiddle.net/kimjaej/f1kwt7j4/

答案 1 :(得分：0)

您需要为100%元素设置宽度ul。那是拿着你的菜单的那个，那个是更短的。

相关问题
最新问题