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/

4

2 回答 2

3

像这样：

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/3xWc​​u/2/

我改变了一个选择器。

从

li:hover ul

到

li:hover > ul

在上面编辑了我的小提琴。在 ul 中添加了一个子菜单类，其中包含 Profile 和 Board li 标签：

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

并在上面添加了一些 CSS。

于 2013-03-01T16:52:35.243 回答
0

你的意思是这样吗？http://jsfiddle.net/3xWc​​u/

<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>
于 2013-03-01T16:49:39.117 回答