CSS HTML 鼠标悬停效果

Question

CSS HTML 鼠标悬停效果

htmlcss

4

以下是我的代码，目前当我悬停在“关于我们”上时，下拉菜单下面的所有内容都会打开。如何更改CSS，使其仅在鼠标悬停时才悬停？这意味着当我悬停在“团队”上时，我应该看到其下面的菜单。

此外，如何调整宽度，使其向左移动更多。

另外，当下拉菜单长度更长时，它会隐藏在我的内容下面，我希望下拉菜单覆盖在页面的正文上，而不是隐藏。

提前感谢大家。

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

JSFiddle: http://jsfiddle.net/LWEry/

- NULL

2个回答

0

你是指像这样吗？http://jsfiddle.net/3xWcu/

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

- martriay

不太对，"团队"有自己的子菜单。但宽度调整很完美。 - NULL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 97ldave · Accepted Answer

就像这样：

ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

.sub-menu
 {
    position: absolute;
    top: 0;
    left: 100%;
 }

http://jsfiddle.net/3xWcu/2/

我修改了一个选择器。

从

li:hover ul

TO

li:hover > ul

我编辑了上面的样例。给包含“Profile”和“Board” li 标签的 ul 添加了一个子菜单类：

 <ul class="sub-menu">
    <li><a href="">Profile</a></li>
    <li><a href="">Board</a></li>
 </ul>

并在上面添加了一些CSS。