所以我在用这个手册代码http://www.lwis.net/free-css-drop-down-menu/
而且我想让菜单栏拉伸页面的整个宽度。

我使用的是nvidia主题,您可以通过下载上面链接上的zip文件找到原始代码。

小提琴
http://jsfiddle.net/6Yy4R/

CSS代码

ul.dropdown {
    font: normal 16px "Square", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

ul.dropdown li {
    padding: 7px 0;
    background-color: #000;
    color: #fff;
    line-height: normal;
}

ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #005CE6; text-decoration: none; }
ul.dropdown a:active { color: #fff; }


ul.dropdown ul {
    width: 170px;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    text-transform: none;
    filter: alpha(opacity=90);
    -moz-opacity: .9;
    KhtmlOpacity: .9;
    opacity: .9;
}

ul.dropdown ul li {
    background-color: transparent;
    color: #000;
    filter: none;
}

ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
    background-color: transparent;
}

ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #fff; }
ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
ul.dropdown ul a:active { color: #fff; }

ul.dropdown *.dir {
    padding-right: 12px;
    background-image: none;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

ul.dropdown li a {
    display: block;
    padding: 7px 14px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding: 4px 5px 4px 14px;
 width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
background-color: #005CE6;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}

ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}

最佳答案

如果只是ul为全角的情况,则需要清除浮点并应用bg颜色

JSFiddle

ul.dropdown {
    background-color: #f00;
    overflow:hidden; /* quick clearfix */
}

关于html - 导航栏拉伸(stretch)我页面的整个宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22095910/

10-11 13:39