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，我可以给你正确的答案。本。

Answer 2

我将首先尝试添加list-style-type: none;到列表项，因为这会删除这些元素具有的自然缩进。