Question

我正在尝试创建一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，会出现子菜单。当你将鼠标移到li上但我无法弄清楚如何使用链接来实现这一点时，我已经成功实现了这一目标。

我之所以尝试使用链接而不是li来实现这一点，是因为我的菜单宽度是100％而且li的区域比链接更大，因此如果您将鼠标悬停在该区域上，则会出现子菜单当你不想要的时候。

我的CSS如下：

.menu {
    border: solid 1px red;
    font-size: 5em;
    font-family: 'Raleway', arial, serif;
}

.menu ul {
}

.menu ul.children {
    display: none;
}

.menu ul li {
    margin: 20px 0 10px 0;
}

.menu ul li:hover ul.children {
    display: block;
    position: absolute;
}

.menu ul li a {
    padding: 10px 10px 0 40px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-decoration: none;
}

Answer 1

如果可能的话，我会避免使用JS。这不是必需的。只需在你的li里面加一个div（比li本身的填充少一些）并将div:hover设置为display:block;。

以下a fiddle演示了这种方法。这很像你已经拥有的。

Answer 2

简单地说，这不是你可以在CSS中做的事情，因为嵌套<ul>在<li>而不是<a>（或者整个子菜单都是链接，那就是只是愚蠢）

你可以用javascript / jquery来解决这个问题

$('.menu ul li a').hover(function() {
    $(this).parent().children('ul').toggle();
});

Answer 3

 1)chmod +x ~/Downloads/jdk-8-nb-8-linux-*.sh
 2)cd ~/Downloads && ./netbeans-8.0.2-linux.sh

CSS下拉菜单

3 个答案: