纯粹的CSS下拉菜单

我试图在http://phpbb.com上看到什么样的100％CSS和HTML下拉菜单。当你将鼠标悬停在导航链接上时，一个新的div出现在你所徘徊的那个下面。纯粹的CSS下拉菜单

我想要做的是使.submenu出现在<li>的正下方，它使用#nav li a:hover submenu {嵌套。据我所知，当一个a元素被覆盖时，这个CSS选择器应该选择.submenu DIV？但它不起作用。

#nav { 
 
    list-style-type: none; 
 
    margin: -5px 0px 0px 5px; 
 
} 
 
#nav li { 
 
    display: inline; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    padding: 3px; 
 
    float: left; 
 
    margin: 0px 10px 0px 10px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    position: relative; 
 
} 
 
#nav li a:hover { 
 
    text-shadow: 1px 1px #333; 
 
} 
 
#nav li a:hover submenu { 
 
    display: block; 
 
    color: red; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    display: none; 
 
}

<ul id="nav"> 
 
    <li><a href="/">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="/">Skins</a> 
 
    <div class="submenu"> 
 
     hello :) 
 
    </div> 
 
    </li> 
 
    <li><a href="/">Guides</a> 
 
    </li> 
 
    <li><a href="/">About</a> 
 
    </li> 
 
</ul>

来源

2011-04-29 Josh

您的意思是'#nav li a：hover .submenu'？ – Neil 2011-04-29 22:36:33

这不工作:( – Josh 2011-04-29 22:37:40

你可以试试这个演示：http://www.themeswild.com/read/horizontally-centering-drop-down-using-pure-css – 2017-01-25 22:16:42

你的倒数第二个选择是寻找一个 “子” 元素，你应该纠正这个说 “.submenu”

像这样：

/*#nav li a:hover submenu {*/ 
#nav li a:hover .submenu { 
    display: block; 
    color: red; 
}

编辑：

为了让悬停工作时，你还需要调整你的CSS使悬停应用到列表项，而不是锚标记：

#nav li:hover .submenu { 
    display: block; 
    color: red; 
}

来源

2011-04-29 22:37:09

啊，是的，.submenu是一个孩子li，而不是a。 – Neil 2011-04-29 22:45:13

完美，当我将鼠标悬停在列表项上时，它可以工作。谢谢！:) – Josh 2011-04-29 22:45:22

@Josh - 不要忘了标记为答案，如果它通过点击绿色勾号帮助： - ） – 2011-04-30 00:59:24

是否缺少一个句点（“”）子菜单前的选择#nav li a:hover submenu？

来源

2011-04-29 22:38:23

试着编辑下面这个部分。放一个。（点）在子菜单之前，因为它是一个类。

#nav li a:hover .submenu { 
display: block; 
color: red; 
}

来源

2011-04-29 22:40:51 Aajahid

#nav li:hover .submenu { 
    display: block; 
    color: red; 
}

你想要的子菜单，当你将鼠标悬停在里，不是在，只是因为你没有用一个内部类的子菜单项出现。

你也可以考虑使用s作为子菜单。

来源

2011-04-29 22:46:15 Arjan

纯粹的CSS下拉菜单

回答

相关问题