Question

我一直试图让子菜单水平。

在我的HTML中，它看起来像这样：

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="selected">About Us</a>
        <!-- I want to make this horizontal -->
        <ul id="subnav">
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li id="nav_last"><a href="#">Item 03</a></li>
        </ul>
        <!-- End here -->
    </li>
 </ul>

我的列表CSS是这样的：

/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
    float:left; 
    display:block; 
    width:100px; 
    background:#d90000; 
    position:relative;
    z-index:500; 
    margin:0 1px;
}

/* this is the parent menu */
#nav li a {
    display:block; 
    /*padding:8px 5px 0 5px; */
    padding-top: 11px;
    font-weight:normal;  
    height:30px; 
    text-decoration:none; 
    text-align:center; 
    color:#f8e2e2;
}

#nav li a:hover {
    color:#f8e2e2;
    background-color: #bf0000;
    border-left: 1px solid #a50000;
    border-right: 1px solid #a50000;
}

#subnav {
    position:absolute; 
    left:0; 
    display:none; 
    margin: 0 0 0 0;
    padding:12px 0 0 0; 
    list-style:none;
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
}

#subnav li{
    font-size: 0.9em;

    border-top:1px solid #a50000;
    border-left:1px solid #a50000;
    border-right:1px solid #a50000;

    position:relative;
    width:98px; 
    display:block; 
    float:left;
}

我正在使用jQuery来显示/隐藏子列表。我的问题是子菜单不是水平的。我需要对CSS进行哪些更改才能使子菜单变为水平？我花了好几个小时都没有成功。

非常感谢！

Answer 1

在#subnav上设置宽幅，例如

#subnav {
    width: 600px;
}

Answer 2

#subnav li项应为"display:inline"而不是阻止。

另外，扩展ul的宽度，如另一个答案中所述。

CSS：水平子菜单问题

2 个答案: