0

我有以下菜单：

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

这是这个菜单的CSS：

.menu {
float:right;
}

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

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

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

现在，我想为菜单中的一项添加下拉菜单，因此我重新创建菜单如下： 

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

<li class="menu_item"><a href="#"><img src="menu/arrow.png" class="menu_img" /></a>
<ul>
<li class="menu_item"><a href="mylink.php"><img src="menu/settings.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/signout.png" class="menu_img" /></a></li>
<ul/>
</li>

我应该做哪些更改才能在箭头图标上添加下拉菜单？

我可以很容易地找到复制粘贴菜单，但是接下来会更难理解 css 下拉菜单是如何创建的......

问候，佐兰

4

1 回答 1

1

这是你需要的吗？我已经删除了图像，因为我没有它们。相反，我只是放了一些文字。 http://jsfiddle.net/9ZBJG/

html:

<ul class="menu">
    <li class="menu_item">
        <a href="mylink.php">
            HOME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            ABOUT ME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            LISTENERS
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            FAVORITES
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            NOTIFICATIONS
        </a>
        <span class="notification_badge_count">4</span>
    </li>
    <li class="menu_item">
        <a href="#">
            ARROW
        </a>
        <ul>
            <li class="menu_item">
                <a href="mylink.php">
                    SETTINGS
                </a>
            </li>
            <li class="menu_item">
                <a href="mylink.php">
                    SIGNOUT<img src="menu/signout.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;
background-color:#f6f6f6;
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:block;
    position:absolute;
    right:0px;
    top:100%;
}

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

说明 css 菜单的结构一般如下：

    - 主菜单容器
  • - 菜单项
      - 子菜单容器
    • - 子菜单项
    • - 子菜单项

如果你一直追到这里，太好了！现在我们所有的主菜单项都需要在一行中彼此相邻......这就是你使用 float:left; 的原因。这才是正确的方法。但是 .menu_item 也是给子菜单项的一个类。因此，我进行了一些调整，以便 float:left 仅由主菜单容器的直接子项使用。

现在，您的 SUB-MENU 是 a ，您必须将其置于其父级之下

  • 为此，您定位父母
  • 作为绝对并定位它的孩子 - 作为相对并使用左侧和顶部值相应地定位。top:100% 意味着直接在主菜单项下。

    现在这个子菜单容器中的 menu_item 需要在另一个之下。为此，不要为这些 menu_items 提供浮动/位置/显示属性，并且代码可以正常工作。（我们之前已经这样做了）

    我在这里用背景和高度做了一点 CSS-play 来帮助你理解。随时提出更多问题。干杯!

    • 于 2012-07-15T14:39:47.543 回答