文章/答案/技术大牛

发布

问下拉菜单
EN

Stack Overflow用户

提问于 2014-06-10 01:44:27

回答 2查看 145关注 0票数 0

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

html

css

drop-down-menu

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-10 02:54:16

你是说这种风格吗？

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

示例：http://jsfiddle.net/kisspa/2bqQL/

票数 1

Stack Overflow用户

发布于 2014-06-10 01:51:05

看看这个例子：小提琴。它只是使用HTML & CSS。

HTML

Item #1
- 分项目1
- 分项目2
- 分项目3
Item #2
- 分项目4
- 分项目5
- 分项目6
Item #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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24131601

复制

相似问题

问下拉菜单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单
EN