Question

我有以下问题：我有一个简单的菜单，其中只有一个菜单项下面有子菜单。

在那个子菜单中，我有两个图标，我想在otehr旁边显示它们，而不是我现在拥有它们，一个在另一个下面。但是，我无法做到这一点。

以下是菜单的代码：

    <ul class="menu">
    <li class="menu_item"><a href="link.php"><img src="home.png" class="menu_img"/></a></li>
    <li class="menu_item"><a href="link.php"><img src="me.png" class="menu_img"/></a></li>
    <li class="menu_item"><a href="link.php"><img src="listeners.png" class="menu_img"/></a></li>                   
    <li class="menu_item"><a href="link.php"><img src="notifications.png" class="menu_img" /></a> <span class="notification_badge_count"></span></li>
    <li class="menu_item"><a href="link.php"><img src="signout.png"  class="menu_img" /></a></li>

    <li class="menu_item"><a href="#"><img src="arrow.png" alt="Edit Profile / Sign Out" title="Edit Profile / Sign Out" class="menu_img" /></a>
        <ul>
            <li class="menu_item"><a href="link.php"><img src="favorites.png" class="menu_img" /></a></li>
            <li class="menu_item"><a href="link.php"><img src="settings.png"  class="menu_img" /></a></li>
        </ul>
    </li>
</ul>

这是我目前的css：

.menu {
    float:right;
}

.menu_item{
    background: rgba(0, 0, 0, 0.0);
}

.menu > li.menu_item{
    float:left;
    height:25px;
    padding:24px 10px 0 10px;
    text-align: center;
    font-size:12px;
    position:relative;
}

.menu_item ul{
    display:none;
}

.menu_img {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.menu_item ul{
    display:none;
}

.menu_item:hover ul{
    display:inline;
    position:absolute;
    right:0px;
    top:100%;
   background: url("/assets/images/menu.jpg") repeat scroll 0 0 transparent;
}

.menu_item ul li{
    background-color:#f6f6f6;
    padding:5px; 
   display:inline;
}

Answer 1

您需要为子菜单设置宽度（并将其设置得足够大，至少是两个项目的宽度加上填充，边框和边距的总和），否则其宽度将是其最宽的宽度项目（喜欢或设置），它们将显示在不同的行上，即使它们是内联元素。

演示http://dabblet.com/gist/3118949

放置列表项内联 - 下拉菜单

1 个答案: