CSS多级下拉菜单不起作用

Question

好吧——我放弃了！我对 CSS 没有太多经验，但我正在尝试创建一个简单的 CSS 多级下拉菜单。我几乎让它工作，但无法弄清楚一件事......当我将鼠标悬停在顶级菜单上时，该项目的所有子级菜单（第 2 和第 3 级）显示。有人可以告诉我我做错了什么吗？我已经尝试了很多解决方案 - 这就是我所在的位置。非常感谢任何帮助:)

#ddmenu {
font-size: .9em; 
display: block;
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0 15px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
cursor: pointer;
outline: none;
font-weight: bold;
color: #8aa8bd;
z-index: 5000;
}

#ddmenu ul {
z-index: 1000;
position: absolute;
top: 25px;
width: 180px;
background: #fff;
display: none;
margin: 0;
padding: 7px 0;
list-style: none;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#ddmenu li {
font-size: 0.9em; 
display: block;
position: relative;
float: left;
text-shadow: 1px 1px 0 #fff;
z-index: 5000;
line-height: 30px;
color: #6c87c0;
padding: 0 10px;
white-space: none;
}

#ddmenu li a {
display: block;
float: left;
font-weight: bold;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#ddmenu li:hover > a {
color: #7180a0;
background: #d9e2ee;
}

/* level 3+ list */
#ddmenu ul ul {
left: 180px;
top: -3px;
}

HTML 是：

<ul id="ddmenu">
    <li><a href="javascript: void(0);">Home</a>
      <ul>
        <li><a href="javascript: void(0);">New</A></LI>
        <li><a href="javascript: void(0);">Show All</A></LI>
      </ul>
    </LI>
    <LI><a href="javascript: void(0);">Layers</a>
        <ul>

            <li><A HREF="javascript: void(0);">Trans 1</A>
            <UL>            
                <li><A HREF="javascript: void(0);">sub one</A></LI>             
                <li><A HREF="javascript: void(0);">sub two</A></LI>             
                <li><A HREF="javascript: void(0);">sub three</A></LI>               
            </UL>
            </li>

            <li><A HREF="javascript: void(0);">Trans 2</A>
            <UL>            
                <li><A HREF="javascript: void(0);">sub one</A></LI>         
            </UL>
            </li>
        </ul>   
    </LI>
</ul>

Answer 1

第一个下拉级别的快速修复是：

添加一个

#ddmenu li:hover ul{
    display: block;
}

但我建议你从头开始构建它，首先是 HTML 结构，然后是 CSS，没有任何效果（边框等）。

Answer 2

假设您正在查看一个纯 CSS 菜单（不太确定您要对所有 javascript: void(0); 执行什么操作，但如果您只是测试设置 # 的输入较少），您似乎缺少如何显示一些东西。即我在任何地方都看不到:hover { display: block;}（或其他任何东西）。为了让我自己更简单，我倾向于先使用 CSS 来让菜单工作，然后让它看起来更好（包括过渡）。所以我已经将代码条带回了正确显示菜单所需的 CSS，我会让你让它看起来更好，但这大致是我通常做的：

#ddmenu li {
    list-style-type: none;
    position: relative;            
}

#ddmenu > li {
    display: inline;
}

#ddmenu ul {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

#ddmenu li:hover > ul {
    display: block;
}

#ddmenu ul li ul {
    top: 0;
    left: 100%;            
}

和 HTML：

<ul id="ddmenu">
    <li>
        <a href="#">Home</a>
        <ul>
            <li><a href="#">New</a></li>
            <li><a href="#">Show All</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="layerhomelink">Layers</a>
        <ul>

            <li>
                <a href="#">
                    Trans 1
                </a>
                <ul>
                    <li><a href="#">sub one</a></li>
                    <li><a href="#">sub two</a></li>
                    <li><a href="#">sub three</a></li>
                </ul>
            </li>

            <li>
                <a href="#">
                    Trans 2
                </a>
                <ul>
                    <li><a href="#">sub one</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

可能还需要根据您的需要调整宽度。这在大多数浏览器中应该没问题，包括回到 IE 8

所以下一步，放回我将其分为以下几部分的样式（使其看起来更漂亮）：

 #ddmenu a {
        padding: .5em;
        font-weight: bold;
        text-decoration: none;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    #ddmenu {
        font-size: .9em;
        height: 30px;
        margin: 0 auto;
        padding: 0 15px;
        background: #fff;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
        cursor: pointer;
        outline: none;
        font-weight: bold;
        color: #8aa8bd;
    }

        #ddmenu ul {
            width: 180px;
            background: #fff;
            margin: 0;
            padding: 7px 0;
            border-radius: 3px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        #ddmenu li {
            font-size: 0.9em;
            text-shadow: 1px 1px 0 #fff;
            line-height: 30px;
            color: #6c87c0;
            padding: 0 10px;
            white-space: nowrap;
        }

            #ddmenu li li a {
                display: block;               
            }

            #ddmenu li:hover > a {
                color: #7180a0;
                background: #d9e2ee;
            }

一切都应该很好。最终，我通常将 css 组合在一起，但有时将它们分开（FORM 与 FUNCTION）会更简洁，即使在不同的 CSS 文件中也是如此，这样您就可以重新设置菜单主题，而不会破坏其功能。

我发现尝试使用浮动和定位来制作 CSS 菜单会加倍并且令人困惑。这纯粹是使用定位，父元素是相对位置，除了让您将其子元素绝对定位在其中之外，它本质上没有任何作用。我使用百分比宽度，因为这样可以正确定位子菜单，而不管宽度和字体/像素大小如何，这样您就不会因像素而陷入细粒度的战争。但请注意，将边距或填充放在错误的位置可能会更改菜单，因此可能需要随时调整。我会分小步走（比如一次一个样式规则），并在所有浏览器中测试您所做的更改，以确保您不会无意中更改菜单行为。

希望对你有帮助