放下菜单

时间:2014-06-10 01:44:27

标签: html css drop-down-menu

我创建了一个带子类别的下拉菜单,每个子类别都有另一个子类别。例如,当用户将鼠标悬停在图像上时,会出现一个下拉菜单,当鼠标放在categeory" Color"上时,另一个下拉菜单应显示为3种颜色。但是,我无法获得有3种颜色的下拉菜单。我怀疑它是因为我没有在我的CSS文件中正确地跟踪标签。有人可以告诉我我做错了什么吗?感谢。

这是我的HTML代码:

<body>
    <ul id="coolMenu">
        <li>
            <a href="#"> <img src = "gear_icon.png" 
                     class = "nav" height = "20px" width = "20px">
            </a>
            <ul>
                <li>
                    <a href = "#"> Colors </a>
                    <ul>
                        <li><a href = "#"> Blue </a></li>
                        <li><a href = "#"> Green </a></li>
                        <li><a href = "#"> Red </a></li>
                    </ul>

                </li>
                <li><a href="#">Background</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
        </li>
    </ul>
</body>

这是我的CSS代码:

#coolMenu, #coolMenu ul {
list-style:none;
 }

 #coolMenu {
float:left;
 }
 #coolMenu > li {
float:left;
 }

 #coolMenu li a {
 display:block;
 height: 2em;
 line-height:2em;
 padding: 0 1.5em;
 text-decoration:none;
 }

  #coolMenu ul {
   position:absolute;
   display:none;
   z-index: 999;
  }

  #coolMenu li:hover ul {
display:block;
  }

  #coolMenu ul li ul li{
  position:absolute;
  display:none;
  z-index:999;
  }

 #coolMenu li ul li:hover a {
      display:block;
 }

2 个答案:

答案 0 :(得分:1)

看一下这个例子:jsfiddle。它只使用HTML&amp; CSS。

HTML     

                
  •                 项目#1                 
                          
    • 子项目#1
    •                     
    • 子项目#2
    •                     
    • 子项目#3
    •                 
                
  •             
  •                 项目#2                 
                          
    • 子项目#4
    •                     
    • 子项目#5
    •                     
    • 子项目#6
    •                 
                
  •             
  •                 项目#3                 
                          
    • 子项目#7
    •                     
    • 子项目#8
    •                     
    • 子项目#9
    •                 
                
  •         

CSS

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}

答案 1 :(得分:1)

你的意思是这种风格

#coolMenu li > ul > li:hover > ul {
    display: block;
    position: absolute;
    left: 110px;
    top: 0px;
}

示例:http://jsfiddle.net/kisspa/2bqQL/ enter image description here