导航栏可以拉伸页面的整个宽度

时间:2014-02-28 12:59:43

标签: html css

所以我正在使用这个人代码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;
}

1 个答案:

答案 0 :(得分:1)

如果只是ul是全宽的情况,你需要清除浮动并应用bg颜色

JSFiddle

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