CSS - 如何将子菜单推到左侧？

Question

我创建了一个带有水平子菜单的水平菜单。虽然我希望所有子菜单都被推到左边，就像第一个子菜单一样。我怎样才能做到这一点？我对 CSS 非常（非常）陌生。

我有这个 HTML 代码：

<div id="menu">
        <ul>
            <li><a href="#nogo">Link 1</a>
                <ul>
                    <li><a href="#nogo">Link 1-1</a></li>
                    <li><a href="#nogo">Link 1-2</a></li>
                    <li><a href="#nogo">Link 1-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 2</a>
                <ul>
                    <li><a href="#nogo">Link 2-1</a></li>
                    <li><a href="#nogo">Link 2-2</a></li>
                    <li><a href="#nogo">Link 2-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 3</a>
                <ul>
                    <li><a href="#nogo">Link 3-1</a></li>
                    <li><a href="#nogo">Link 3-2</a></li>
                    <li><a href="#nogo">Link 3-3</a></li>
                </ul>
            </li>
        </ul>
    </div>

我有这个 CSS 代码：

    #menu{
padding:0;
margin:0;
overflow:hidden;
height:60px;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}

#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

#menu li a:hover{
background-color: red;
}

#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
width: 600px;
}

#menu ul li:hover ul{
visibility:visible;
display: inline;
}

Answer 1

从

position: relative

中删除

#menu li

并将其添加到

#menu ul

中。还要将

left: 0

添加到

#menu ul ul

：

#menu ul{
    padding:0;
    margin:0;
    position: relative;   /* add this */
}

#menu li{
    /* position: relative;   //remove this */
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}

#menu ul ul{
    position: absolute;
    left: 0;              /* add this */
    top: 30px;
    visibility: hidden;
    width: 600px;
}

工作示例：http://jsfiddle.net/WJN4G/

Answer 2

将位置从

#menu li

移动到

#menu ul

，并将

left:0;

添加到

#menu ul ul

left:0;

导致元素 (

#menu ul ul

) 与它的第一个父元素对齐，其位置不同于

static

（这是默认值）。这就是为什么您需要将元素上的

position:relative

向上移动到

#menu ul

，以便所有子元素

ul

与父元素

ul

的左边缘对齐。

#menu ul {
  padding: 0;
  margin: 0;
  position: relative; /* <- moved */
}

#menu li {
  position: relative; /* <- deleted */
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu ul ul {
  position: absolute;
  left: 0; /* <- added */
  top: 30px;
  visibility: hidden;
  width: 600px;
}

这是你修改过的小提琴