Question

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

#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

假设您正在查看纯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组合在一起，但有时候将它们分开（表格来自FUNCTION）更加清晰，即使在不同的CSS文件中也是如此，这样你就可以重新设置菜单主题，而不会破坏它的功能。

我发现尝试使用浮动和定位进行CSS菜单加倍，并且令人困惑。这纯粹是使用定位，父元素是位置相对的，除了让你的子元素绝对位于其中之外，它实质上什么也没做。我使用百分比宽度，然后正确定位子菜单，无论宽度和字体/像素大小不同，因此您不会对像素进行细粒度的战争。但请注意，将边距或填充放在错误的位置可能会改变菜单，因此可能需要进行调整。我会小步骤（一次一个样式规则），并在所有浏览器中测试你所改变的内容，只是为了确保你不会无意中改变菜单行为。

无论如何希望有所帮助

Answer 2

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

只需添加一个

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

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

CSS多级下拉不起作用

2 个答案: