下拉菜单

我创建了一个包含子类别的下拉菜单，每个子类别都有另一个子类别。例如，当用户将鼠标悬停在图像上时，会出现一个下拉菜单，当鼠标放置在“颜色”层上时，另一个下拉菜单应显示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; 
}

来源

2014-06-10 user1923

你的意思是这种风格

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

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

来源

2014-06-10 02:54:16 Kisspa

@meagar：谢谢。这实际上更接近我正在寻找的建议。还有一个问题，当我将鼠标悬停在特定的盒子上时，是否有方法来改变文本的颜色？ “颜色：价值”似乎并不奏效。 – user1923

@ user1923这不是我的答案，你是在问错人 – meagar

看一看这个例子：jsfiddle。它只是使用HTML & 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}

来源

2014-06-10 01:51:05 manosim

@马诺利斯。谢谢！我会修改它以适应我的需求。 – user1923

太棒了！祝你好运！希望它有帮助.. – manosim

回答

相关问题