html - 如何制作全宽下拉响应菜单

Question

我不知何故无法将此菜单管理为全宽这是我的代码笔 http://codepen.io/anon/pen/xwDcb

我希望我的下拉菜单宽度从左到右为 100%。我究竟做错了什么

body {
background-color:#000;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
width:100%;
}
.nav-full {
background:url(../images/nav-bg.png) no-repeat 0 0;
}
.nav-centre {
width:960px;
margin:0 auto
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both
}
.nav ul {
list-style: none;
}

我的html代码

<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
</div>
</div>

Answer 1

你必须给 nav-center 类 100%，现在它是 975px 或类似的东西，它会包装你的列表元素。所以无序列表的 100% 是相对于 nav-center 元素的。

如果你想让导航菜单居中给导航中心类位置：相对；左：50% 和边距：左 -511px。（margin-left 应该是无序列表的宽度）

我认为最好的解决方案是将下拉菜单从导航中的 ul 中取出。所以它与其他列表无关。

像这样标记你的html：

<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
    <div class="nav-centre">
        <ul class="nav">
            <li><a href="index.html" class="active">HOME</a></li>
            <li> <a href="#">Products</a></li>
            <li> <a href="#">Patents & Publications</a></li>
            <li> <a href="#">Partnering</a></li>
            <li> <a href="#">About Us</a></li>
            <li> <a href="#">Contact Us</a></li>
            <li> <a href="#">Careers</a> </li>
        </ul>

        <ul>
            <li class="under"><a href="#jquery-pagescroller-2">Indus Advantage</a></li>
            <li class="under"><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a></li>
            <li class="under"><a href="#jquery-pagescroller-4">Pipeline</a>
        </ul>
        <ul>
            <li class="under"><a href="#">Overview</a></li>
            <li class="under"><a href="#">Exercise Physiology</a></li>
            <li class="under"><a href="#">Manufacturing & Quality Control</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Global Patenting Strategy</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Publications</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Enquiries - Product</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Vision & Values</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a></li>
        </ul>

    </div>
</div>

你现在只需要给 li.under position:absolute ，其余的，如何风格，应该很清楚。

Answer 2

检查此代码

<style>
#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em;
}

#nav > li {  /* Added ">" */
    float: right; 
    position: relative;
    padding: 0;
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em;  
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
    border-left: none;
}

#nav li a:hover, #nav li a:focus {
    color: #666;
}

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */
    list-style-type: none; 
    padding: 0; margin: 0; 
}

#nav li:hover ul { 
    opacity: 1; 
}

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: left; 
    margin-bottom: .75em;
}

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em;
}</style>
<ul id="nav">
<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
    </ul>
</div>
</div>