定位我的子菜单

Question

目前，当显示我的子菜单时，它们是这样的：

我想要的是它出现在主菜单的右侧，而不改变主菜单的高度。也许，像这样：

我似乎想不出 CSS 来做到这一点。

HTML代码：

<div id="sortmenu">
    <div id="sortmenu_wrapper">
        <ul>
            <li><a>Song</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Artist</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Album</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>   
            <a>Genre</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Release Date</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Newest to Oldest</a></li><li>
                    <a href='#'>Oldest to Newest</a></li>
                </ul>
            </li><li>
            <a>BPM</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Slowest to Fastest</a></li><li>
                    <a href='#'>Fastest to Slowest</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS代码：

#sortmenu {
background-color: #222;
width: 200px;
position: absolute;
margin-top: 15px;
margin-left: 15px;
border: 5px solid DarkBlue;
}
#sortmenu_wrapper {
width: 200px;
margin: 0 auto;
text-align: left;
}





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

#sortmenu ul li:hover > ul {
display: block;
}


.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid DarkBlue;
border-left: 0;
margin-left: -5px;
width: 200px;
left: 100%;
margin-top: -30px;
}
.sortsubmenu > li {
display: block;
position: relative;
}
.sortsubmenu li a:hover {
color: #699;
}

Answer 1

你好现在定义你的 #sortmenu ul > li position: relative; 和 #sortmenu ul > li ul 这个

position:absolute;
        right:0;
        top:-5px;

喜欢

#sortmenu ul > li {
    position: relative;
}
#sortmenu ul > li ul{
    position:absolute;
    right:0;
    top:-5px;
}

==============演示是

#sortmenu {
background-color: #222;
width: 200px;
position: absolute;
margin-top: 15px;
margin-left: 15px;
border: 5px solid DarkBlue;
}
#sortmenu_wrapper {
width: 200px;
margin: 0 auto;
text-align: left;
}





#sortmenu ul {
list-style-type: none;
padding-left: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#sortmenu ul > li {
display: block;
width: 200px;
    position: relative;
}
#sortmenu ul > li ul{
    position:absolute;
    right:0;
    top:-5px;
}
#sortmenu ul li:hover {
background-color: #333;
}
#sortmenu ul li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#sortmenu ul li:hover > ul {
display: block;
}


.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid DarkBlue;
border-left: 0;
margin-left: -5px;
width: 200px;
left: 100%;
margin-top: -30px;
}
.sortsubmenu > li {
display: block;
position: relative;
}
.sortsubmenu li a:hover {
color: #699;
}

<div id="sortmenu">
    <div id="sortmenu_wrapper">
        <ul>
            <li><a>Song</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Artist</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Album</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>   
            <a>Genre</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>A to Z</a></li><li>
                    <a href='#'>Z to A</a></li>
                </ul>
            </li><li>
            <a>Release Date</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Newest to Oldest</a></li><li>
                    <a href='#'>Oldest to Newest</a></li>
                </ul>
            </li><li>
            <a>BPM</a>
                <ul class="sortsubmenu">
                    <li><a href='#'>Slowest to Fastest</a></li><li>
                    <a href='#'>Fastest to Slowest</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 2

您在 .sortsubmenu 上设置的 position: absolute 被在 #sortmenu ul 上设置的 position: relative 覆盖。

为了解决这个问题并避免将来出现更多问题，当您在 .sortsubmenu 中设置样式时，请务必添加 #sortmenu 以便优先设置样式。

发件人：

.sortsubmenu {
  display: none;
  position: absolute;
  background-color: #333;
  border: 5px solid DarkBlue;
  border-left: 0;
  margin-left: -5px;
  width: 200px;
  left: 100%;
  margin-top: -30px;
}

收件人：

#sortmenu .sortsubmenu {
  display: none;
  position: absolute;
  background-color: #333;
  border: 5px solid DarkBlue;
  border-left: 0;
  width: 200px;
  left: 100%;
  top: -5px;
}

Fiddle

定位我的子菜单

Positioning my submenus

html

css

submenu