【问题标题】:HTML/CSS sub-submenuHTML/CSS 子菜单
【发布时间】:2015-10-19 18:38:04
【问题描述】:

我在将子子菜单放入我的 html/css 设计菜单时遇到问题。我附上了一张我从给定代码中获得的结果的图片。如果有人能指出我在哪里犯了错误,那将不胜感激。我把所有东西都看了两遍,感觉我只是在错误地实现 css。

#topbar {
background-color: #222;
}

#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}

#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover ul {
display: block;
}

#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}

#sortsongmenu {
display: in-line;
position: relative;
background-color: #333;
border: 5px solid #222;
border-left: 0;
margin-left: -5px;
}

#sortsongmenu li{
display: inline-block;
}

#sortsongmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
    <div id="topbar_wrapper">
        <ul id="mainmenu">
            <li><a href="#">Home</a></li><li>
            <a href="#">Search</a></li><li>
            <a href="#">Sort By &#9660</a>
                <ul id="sortmenu">
                    <li><a href='#'>Song</a>
                        <ul id="sortsongmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>   
                    <a href='#'>Artist</a></li><li>
                    <a href='#'>Album</a></li><li>
                    <a href='#'>Genre</a></li><li>
                    <a href='#'>BPM</a></li><li>
                    <a href='#'>Release Date</a></li>
                </ul>
            </li><li>
            <a href="#">Add Song</a></li><li>
            <a href="#">Contant Us</a></li>
        </ul>
    </div>
</div>

【问题讨论】:

  • 你还没有真正说出问题所在。
  • @Dominofoe 的问题似乎是菜单的第三层总是打开,而意图是它在悬停父级时打开。
  • 所以您希望在将鼠标悬停在歌曲上时打开 a-z 和 z-a?
  • 是的,很抱歉没有说清楚

标签: html css html-lists submenu


【解决方案1】:
#sortmenu li: hover ul

需要:

#sortmenu li:hover ul

也在#sortsongmenu

display: in-line;

需要

display: none;

【讨论】:

  • 我完成了建议的更改,但没有任何改变。
  • 非常感谢。因此,据我所知,不包括“>”会导致#mainmenu中的ul显示所有内容,这导致子菜单在悬停在排序依据时也会显示?这种理解正确吗?
  • 另外,如果我想让子菜单出现在第一个子菜单的右侧,我该怎么做?
  • 重要的变化是将“in-line”(实际上根本不是属性)更改为“none”。没有悬停时没有显示您的 sortsongmenu 列表。其余的更改只是一些清理工作。我删除了一些什么都不做的规则,并添加了“>”,以便悬停效果仅适用于直接子代而不是所有后代。
  • codepen.io/anon/pen/GJwEdv 试试这个放在第一个子菜单的右边。我只是使用 position: absolute, top: -5px 和 left: 100% 将其与菜单父列表项的右侧对齐。
猜你喜欢
  • 2016-06-18
  • 1970-01-01
  • 1970-01-01
  • 2015-01-27
  • 2015-08-11
  • 1970-01-01
  • 2016-12-11
  • 2013-07-05
  • 1970-01-01
相关资源
最近更新 更多