对齐下拉菜单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;添加到列表项中，因为这会删除这些元素所具有的自然缩进。