Question

我有以下菜单：

<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下拉列表会更加困难...

的问候，卓然

Answer 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是一个，你必须带它的父母

为此，您将父

定位为绝对并将其定位为子项 - 作为相对位置并相应地使用left和top值定位。 top：100％意味着紧接着主menu_item。

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

我在这里做了一些CSS背景和高度来帮助你理解。随意提出更多问题。干杯！

重新创建菜单现有菜单，在一个项目上添加下拉菜单

1 个答案: