所以我在用这个手册代码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/