Question

如何将子菜单链接放在彼此之下。现在他们跳到整个菜单下面并且紧挨着放在一起。之后的链接属于子菜单。我知道它的位置，但不知道哪一个是。

CSS

#nav {
    background-color: #8D8084;
}
#nav ul {
    margin:0;
    list-style-type: none;
    padding: 12px;
}
#nav li {
    display:inline;
}
#nav a {

}   
#nav ul li a {
    text-decoration:none;
    color:#fff;
    padding-right: 60px;
    padding-top: 15px;
    padding-bottom: 13px;
    padding-left: 50px;
    margin: -12px;
    background:#8D8084;
    font-family: Candara,"Trebuchet MS", Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-transform:uppercase;
}
#nav ul li.active  a {
    background-color:#A4999D;
    color:#FFFFFF;
}   
#nav a:hover {
    background-color:#A4999D;
    color:#FFF;
}
#nav ul ul {
    display: none;
}
#nav ul li:hover > ul {
    display: block;
}

Answer 1

你必须改变自己的风格。这是我创建的样本。

 #nav {
  background-color: #8D8084;
 }

#nav ul {
margin:0;
list-style-type: none;
 padding: 12px;
}

#nav li {
display:inline;
position:relative;
}
#nav ul ul li
{
 display:block;
}


#nav ul li a {
text-decoration:none;
color:#fff;
padding-right: 60px;
padding-top: 15px;
padding-bottom: 13px;
padding-left: 50px;
margin: -12px;
background:#8D8084;
font-family: Candara,"Trebuchet MS", Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-transform:uppercase;
}
#nav ul li.active  a {
background-color:#A4999D;
color:#FFFFFF;
}
#nav a:hover {
background-color:#A4999D;
color:#FFF;
}

#nav ul ul {
display: none;
position:absolute;
top:20px;
left:0;
}

#nav ul li:hover > ul {
    display: block;
}

DEMO

修改

基于OP评论的新更新的jsfiddle Here。

如何将子菜单链接堆叠在一起？

1 个答案:

修改