html - 对齐下拉菜单 CSS

Question

我目前正在开发一个纯 css 多级下拉菜单，但我终生无法弄清楚如何让下拉菜单自动对齐到父菜单的左侧。

这是截图

这是CSS

/*---------HEADER MENU---------*/
#header .content ul.menu li ul{
  display: none;
  margin: 0;
  float: left;
  padding: 0;
  position: absolute;
  z-index: 200;
}
#header .content ul.menu li ul li{
 position: relative;
 top: 20px;
 margin: 0;
}
#header .content ul.menu li:hover > ul{
 display: inline;
 float: left;
 width: 125px;
}

#header .content ul.menu li ul li li{
 width: 125px;
 float: left;
 position: absolute;}

/*---------VISITORS MENU---------*/
#block-menu-menu-visitors .content ul.menu{
  z-index: 200;
}
#block-menu-menu-visitors .content ul.menu li{
 padding: 2px 15px 2px 15px;
 display: inline-block;
 float: left;
 background-color: #ffff90;
}

#block-menu-menu-visitors .content ul.menu li:hover{
 padding: 2px 15px 2px 15px;
 float: left;
 display: inline-block;
 background-color: #ffffaa;
}

这是 HTML/PHP

这会将我拥有的任何“标题”元素(在本例中为菜单)放在主菜单部分的正下方。

任何帮助或朝着正确方向的插入都会有所帮助!谢谢

Answer 1

我觉得...

#header .content ul.menu li:hover > ul{
display: block;
float: left;
width: 125px;
}

可能会起作用。如果不添加 html，我可以给你正确的答案。本。