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;

就像那个 s

#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

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

要解决此问题并避免将来出现进一步的问题，当您在.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

定位我的子菜单

2 个答案: