CSS下拉菜单 [英] CSS Drop Down Menu

问题描述

我想创建一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，会显示子菜单。我已经设法实现这一点，当你鼠标悬停在一个李，但不能弄清楚如何使用链接。

我试图使用链接而不是li的是，我的菜单宽度是100％，并且li跨越比链接更大的面积，因此如果您将鼠标悬停在该区域上，当您不想要它时，会显示子菜单。 p>

我的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; 
} 
  

解决方案

如果可能的话。这不是必需的。只要在你的li里面放一个div（比li本身少一点padding），然后将 div：hover 设置为 display：block; 。

以下是小提琴演示该方法。这很像你已经有了。

I'm trying to make a simple CSS drop down menu that when you mouse over a link, the sub menu appears. I've managed to achieve this when you mouse over an li but can't figure out how to do it using a link.

The reason why I'm trying to do this using a link rather than the li is that my menu width is 100% and the li spans a greater area than the link so if you mouse over that area, the sub menu appears when you don't want it to.

My CSS is as follows:

.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;
}

解决方案

I would avoid using JS for this if possible. It's not necessary. Just stick a div inside your li (with a bit less padding on it than the li itself) and style the div:hover to display:block;.

Here's a fiddle demonstrating the approach. It's much like what you already have.

这篇关于CSS下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！