1

我有一个用 CSS 制作的下拉菜单，目前它有 5 里可见。当您将鼠标悬停在其中一个 li 上时，它会突出显示，然后出现下拉效果，下一个 ul 显示在下方。所以基本上你有第一组选项可供选择，然后当你将鼠标悬停在第一组选项上时，你会得到第二组选项。我想做的是，当您将鼠标悬停在第二组选项上时，会出现第三组选项，并使第三组选项出现在第二个选项的右侧。

指向我想做的事情的链接：http: //cssmenumaker.com/menu/opera-drop-down-menu

这是我的html。请注意 li 的描述不是最终的，我将更改我希望链接稍后说的内容。

<li><a href="#">Home</a>
<ul class="subforums">
<li><a href="#">Elite's</a></li>
<li><a href="#">Newbs</a></li>
<li><a href="#">Subscribers</a></li>
</ul>
</li>
<li><a href="#">Samples</a>
<ul class="subsites">
<li><a href="#">Architecture</a></li>
<li><a href="#">Furniture</a></li>
</ul>
</li>
<li><a href="#">Workshop</a>
<ul class="subcontactus">
<li><a href="#">By Phone</a></li>
<li><a href="#">By e-mail</a></li>
<li><a href="#">By Text</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="subabout">
<li><a href="#">The Team</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Goal</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="subsignup">
<li><a href="#">Find Out More</a></li>
<li><a href="#">Costs</a></li>
<li><a href="#">Paying Methods</a></li>
</ul>
</li>
</ul>

` 注意：在我刚刚发布的所有 html 之前都有一个 ul 开始标签，但由于某种原因它不会让我在这里使用它。

和CSS：

navmenu 是整个下拉菜单的打开 ul 的 id `#navmenu, #navmenu ul{ list-style-type: none; }

#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}`#navmenu, #navmenu ul{
list-style-type: none;
}
#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#navmenu a{
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #00cff0;
border: 1px solid #ccc;
border-radius: 5px;
color: white;
}
#navmenu li:hover > a{
background-color: #00d3f5;
}
#navmenu li:hover a:hover{
font-size: 105%;
}
#navmenu ul{
display: block;
position:absolute;
top: 26px;
left: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
#navmenu li:hover ul{
visibility: visible;
}
#navmenu{
margin: auto;
width: 700px;
}

我希望你能理解这一点并帮助我。我试图尽可能清楚地感谢您的阅读。:)

4

3 回答 3

1

工作演示在这里

您需要将这些类添加到您的 css 中：

ul#navmenu li ul li ul {
    list-style-type: none;
    position: absolute;
    display: none;
    left: 0;
    margin: -26px 0 0 127px;
    padding: 0;
}
ul#navmenu li ul li:hover ul {
    display: block;
}

你可以在JSFiddle上看到你的代码

于 2013-09-22T10:17:31.927 回答
0

如果对你有任何意义，我几天前为了类似的问题做了这个FIDDLE

<div id="menu">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Link 2</a>
      <ul class="submenu">
        <li><a href="#">Link 2.1</a></li>
        <li><a href="#">Link 2.2</a></li>
        <li><a href="#">Link 2.3</a></li>
        <li><a href="#">Link 2.4</a></li>
        <li><a href="#">Link 2.5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 3</a>
      <ul class="submenu">
        <li><a href="#">Link 3.1</a></li>
        <li><a href="#">Link 3.2</a></li>
        <li><a href="#">Link 3.3</a></li>
        <li><a href="#">Link 3.4</a></li>
        <li><a href="#">Link 3.5</a>
          <ul class="sub-submenu">
            <li><a href="#">Link 3.5.1</a></li>
            <li><a href="#">Link 3.5.2</a></li>
            <li><a href="#">Link 3.5.3</a></li>
            <li><a href="#">Link 3.5.4</a></li>
            <li><a href="#">Link 3.5.5</a></li>
          </ul> 
        </li>
      </ul>
    </li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</div>

#menu {
  background: #333;
  width: 960px;
  margin: 0 auto;
  height: 30px;
}
#menu ul {
  list-style: none;
}
#menu ul li {
  float: left;
}
#menu ul li a {
  display: block;
  height: 25px;
  padding: 5px 10px 0 10px;
  font-family: Verdana;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  text-shadow: 1px 1px 0 #252525;
  transition: all 0.2s linear;
}
#menu ul li a:hover {
  background: #555;
  color: #00aeff;
}
#menu ul li .submenu {
  background: #333;
  position: absolute;
  display: none;
  top: 46px;
  margin-left: 0;
  padding: 0;
  width: 150px;    
}
#menu ul li:hover .submenu {
  display: block;
}
#menu ul li .submenu li {
  margin-bottom: 5px;
  width: 100%;
}
#menu ul li .submenu li .sub-submenu {
  background: #333;
  position: absolute;
  display: none;
  left: 0;
  margin: -30px 0 0 150px;
  padding: 0;
  width: 150px;    
}
#menu ul li .submenu li:hover .sub-submenu {
  display: block;
}
于 2013-09-22T10:04:40.817 回答
0

我想我有你想要的。

3 级菜单。

代码笔示例

于 2013-09-22T11:25:06.993 回答