0

次の問題があります。1つのメニュー項目だけの下にサブメニューがある単純なメニューがあります。

そのサブメニューには2つのアイコンがあり、現在のように上下に並べて表示したいと思います。しかし、私はそれをなんとかすることができません。

メニューのコードは次のとおりです。

    <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;
}
4

1 に答える 1

1

サブメニューの幅を設定する必要があります（そして、少なくとも2つのアイテムの幅とパディング、境界線、マージンの合計を十分に大きく設定します）。そうしないと、その幅は最も幅の広いアイテムの幅になります（お気に入りまたは設定）、インライン要素であっても、異なる行に表示されます。

デモhttp://dabblet.com/gist/3118949

于 2012-07-15T22:32:58.860 に答える