定位我的子菜单答案

【问题标题】：Positioning my submenus定位我的子菜单
【发布时间】：2015-08-04 13:50:52
【问题描述】：

目前，当显示我的子菜单时，它们看起来像这样：

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

我似乎无法弄清楚要做到这一点的 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;
}

【问题讨论】：

标签： html css submenu

【解决方案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>

【讨论】：

【解决方案2】：

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

为了解决这个问题并避免将来出现更多问题，当您在.sortsubmenu maker 中设置样式时，请确保添加#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

【讨论】：