HTML/CSS 附加到垂直子菜单的水平子菜单

Question

我想将水平的垂直子菜单与子菜单对齐，如下所示：

我可以实现这个，如图所示，但是我必须把位置设为绝对。问题是我希望每个子子菜单的顶部与它所附加的子菜单的顶部对齐。例如，艺术家子子菜单与显示的子菜单完全相同，但 A 到 Z 与艺术家对齐。

为了按照我现在的方式做到这一点，我将不得不创建许多不同的 css 部分，而不是能够 select 一个部分的多个子菜单（例如#sortsongmenu, #sortartistmenu { styling }。我想找到一种方法让子子菜单位于显示的位置，而不必单独定位每个子子菜单，而是有一种可以应用于所有子子菜单的样式方法具有相对或其他一些定位。

HTML代码：

<-- CSS code--> 
#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, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}

#sortsongmenu li, #sortartistmenu li{
display: inline;
}

#sortsongmenu li a:hover, #sortartistmenu 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>
            <ul id="sortartistmenu">
              <li><a href='#'>A to Z</a>
              </li>
              <li>
                <a href='#'>Z to A</a>
              </li>
            </ul>
          </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>

Answer 1

尝试：

改变

#sortmenu li {
    display: block;
}

#sortsongmenu, #sortartistmenu {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-left: 0px;
    text-align: right;
    left: 100%;
    bottom: 65%;
    width: 100px;
}

至

#sortmenu > li {
    display: block;
    position: relative;
}

#sortsongmenu, #sortartistmenu {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-left: 0px;
    text-align: right;
    left: 100%;
    top: 0;
    width: 100px;
}

已编辑：

将顶部更改为 -5 像素，因为您的子子菜单的边框顶部为 5 像素。这样会更好看。

HTML/CSS 附加到垂直子菜单的水平子菜单

HTML/CSS Horizontal sub-submenu attached to vertical submenu

html

css

menu

submenu