html - 使子菜单比主菜单宽

Question

我有this子菜单，我希望它在下拉菜单出现时宽度为 100% 并覆盖整个页面。目前，如果我将宽度更改为 100%，它只会使其与主菜单的宽度相同。

这是我当前的 HTML:

<header>
<div class="header">
    <div class="nav">
        <ul>
            <li>    <a href="services.html">Services</a>

                <ul class="sub">    <a href="services.html#branddesign">
                            <li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" />
                                <br>
                                Brand Design
                            </li></a>
<a href="services.html#brandonline">
                            <li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" />
                                <br>
                                Brand Online
                            </li></a>
<a href="services.html#brandmarketing">
                            <li><img class="imgcenter" src="images/Brand-Marketing-Circle-Blue.png" width="100px" />
                                <br>
                                Brand Marketing
                            </li></a>
<a href="services.html#brandmanagement">
                            <li><img class="imgcenter" src="images/Brand-Management-Circle-Blue.png" width="100px" />
                                <br>
                                Brand Management
                            </li></a>

                </ul>
            </li>
            <li>    <a href="">Clients</a>

            </li>
            <li>    <a href="">About</a>

            </li>
            <li>    <a href="">Contact Us</a>

            </li>
        </ul>
    </div>
</div>
</div>

和这个 CSS:

    .header {
    position: fixed;
    display: block;
    float: left;
    width: 100%;
    height: auto;
    background-color: #666;
    z-index: 9999;
}

.nav {
    position: static;
    float: left;
    width: 500px;
    height: 50px;
    margin: 10px 5px;
}

.nav a {
    text-decoration: none;
    color: #FFFFFF;
}

.nav ul > li:first-child {
    padding-bottom: 25px;
}

.nav a:hover {
    text-decoration: none;
    color: #6db6e5;
}

.nav li {
    font-family: "eras_demi_itcregular", Arial, Helvetica;
    list-style: none;
    float: left;
    margin-right: 50px;
}

.nav li:hover a:hover {
    padding-bottom: 5px;
    border-bottom: 2px solid #6db6e5;
    color: #6db6e5;
}
.nav ul li:hover > ul {
    height:150px;

}
.nav ul {
    list-style: none;
    position: absolute;
    display: inline-block;
    margin-top: 23px;
}

.nav ul ul {
    width: 494px;
    background: #7d7c7c;
    height: 0px;
    overflow: hidden;
    padding-left:0;
    margin-left:0;
    font-size: 12px;
    text-align: center;
    -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;    
}

.nav ul ul li {
    padding: 10px;
    margin-left: -1px;
    margin-right: 0;
    height: 129px;
}

.nav ul ul li:last-child {

}

.nav ul ul li:hover {
    background: #666;
}

.nav li li { 
  height:130px; 
  -webkit-transition:all .3s ease-in-out;
 }

谁能告诉我怎样才能使子菜单比主菜单宽？

Answer 1

尝试将此添加到您的 CSS:

nav ul ul {
    width: 100vw;
    left: 0;
}

fiddle :http://jsfiddle.net/9QE58/1/embedded/result/

无论像素宽度是多少，它都应该保持在视口(viewport)宽度的 100%。