2

我有一个水平菜单导航。

在此处输入图像描述

代码是：

<div class="menu-holder">
    <ul class="menu"> 
        <li>
            <a href="#">Home</a> 
        </li>
        <li>
            <a href="#">Profile</a> 
        </li>
        <li>
            <a href="#">Billing</a> 
            <ul class="submenu"> 
                <li><a href="#">New</a></li> 
                <li><a href="#">Find</a></li>                         
            </ul>
        </li>
        <li>
            <a href="#">Workspaces</a> 
        </li>
        <li>
            <a href="#">Manage Leaves</a> 
        </li>
        <li>
            <a href="#">Blogs</a> 
        </li>
        <li>
            <a href="#">News</a> 
        </li>
        <li>
            <a href="#">Search</a> 
        </li>              
        <li>
            <a href="#">Albums</a> 
        </li> 
    </ul>         
</div>

CSS：

ul.menu {
    list-style: none;
    padding: 0 20px;    
    margin: 0;
    float: left;
    width: 960px;
    background: #222;
    font-size: 1.2em;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;    
    behavior: url(CSS3PIE);
}
ul.menu li {
    float: left;
    margin: 0;  
    padding: 0 15px 0 0;
    position: relative; 
}
ul.menu li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.menu li a:hover{
    background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span { 
    width: 17px;
    height: 35px;
    float: left;
    background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;} 
ul.menu li ul.submenu {
    list-style: none;
    position: absolute; 
    left: 0; top: 44px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border-radius: 5px; 
    -webkit-border-radius: 5px;
    border: 1px solid #111;
    behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
    width: 170px;
}
html ul.menu li ul.submenu li a {
    float: left;
    width: 145px;
    background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover { 
    background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center; 
}

也有 jQuery 被用来创建这个导航。

现在我想让 li 完全覆盖 ui。但没有对 li 应用固定宽度。因为根据登录用户的角色，还有另一个菜单项（图中未显示）。

是否可以？

在此处输入图像描述

4

2 回答 2

3

我相信解决这个问题的最好方法是使用display: table/table-cell而不是float: left. 这是一个小提琴：http: //jsfiddle.net/nk7yY/

基本上，您将在代码中更改的是：

ul.menu {
    display: table;
    width: 100%; /* Tables are not 100% width like block elements */
    /* Everything you already had except float: left; which I don't really get why you have to begin with */
}

ul.menu li {
    display: table-cell;
    /* Everything you already had except float: left; */
}

ul.menu li a {
    /* Just remove the float here as well */
}

编辑：虽然这在旧 IE 中不起作用，但您可以为它们保留浮动（*float例如，使用 hack）。

于 2012-04-08T13:38:29.783 回答
1

你是说你有 9 个 ul.menu li 元素，有时会有第 10 个？并且您希望所有 9 个（或 10 个）一起填充 ul.menu 的宽度？

还是您在谈论 ul.submenu？

只是说“让 li 完全覆盖 ui”听起来也像是你想要一个 <li> 来覆盖导航 ui 的整个宽度（假设它是你的 <ul> 而不是你的 UI 的其他部分。

这是你想做的吗？还是您只希望所有 9 或 10 个 <li> 项目填充 <ul> 的空间？

如果是这样，您可能应该在 <ul class="menu"> 上放置一个类，该类会根据登录用户的角色而变化，以便您可以相应地调整样式。

提供更多关于您尝试做什么以及您想要支持哪些浏览器的信息，即 CSS3。

于 2012-04-08T13:18:42.267 回答