jquery - 垂直 Accordion 菜单 css

Question

我需要调整 Accordion 垂直菜单 CSS。我不明白如何调整子菜单 li

  <div id="menuleft">
    <div class="top">header</div>
  <ul>
    <li><a href="#">Main 1</a>
     <ul>
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 1</a></li>
    </ul>
   </li>
   <li><a href="#">Main 2</a></li>
   <li><a href="#">Main 3</a></li>
   <li><a href="#">Main 4</a></li>
   </ul>    
  </div>

这是CSS:

#menuleft{
position: absolute;
bottom:0px; left:100px;
height: 100%;
width: 160px;
background-color: #BAB3D6;
}
#menuleft .top{
float:right;
width: 160px;
color:#FFFFFF;
font-size:110%;
margin:20px 0px 20px 0px;
height: 30px;
}
#menuleft ul{
position:absolute;
width: 160px;
top:130px;
left:0;
margin: 0;
padding: 0;
}
#menuleft li{
width: 130px;
height: 30px;
left:0; 
font-size: 95%;
line-height: 30px; 
list-style: none;
cursor:pointer;
}
#menuleft li a { 
text-decoration:none; 
display: block; 
width: 100%; 
height: 100%; 
padding-left:30px;
vertical-align:middle;
}
#menuleft ul ul li a { 
text-decoration:none; 
display: block; 
width: 100%; 
height: 100%; 
padding-left:30px;
vertical-align:middle;
background-color: #d8d4e8;
}
#menuleft li a:hover{
background-color:#652D91;
color:#FFFFFF;
font-weight:bold;   
}
#menuleft li a:active {
background-color:#ad45c5;
color:#FFFFFF;
}

之后我使用 jquery 展开和折叠子菜单在此先感谢您的帮助

这是JSfiddle

更新

在 misterManSam 的帮助下，它现在可以工作了，但我仍然有一个小问题，当我展开子菜单时，它们的背景并不统一，如您所见，它发出一点点击，这是 Jfiddle。

JSfiddle

Answer 1

• 从 #menuleft ul 中删除 position: absolute 并使用上边距定位。

• 移除 #menuleft li

  上的高度

• 给顶层 ul 一个类(这里是 .nav)并设置样式而不是 #menulet ul这样二级 ul 就没有样式了。

• 为 .nav 提供与 #menulefft 相同的背景。这将确保即使在非常小的高度，链接后面也有背景。

此外，确保从 ul 和列表项中删除所有默认边距和填充。

演示

ul,li { margin: 0; padding: 0; }
#menuleft {
  position: absolute;
  bottom: 0px;
  left: 100px;
  height: 100%;
  width: 160px;
  background-color: #BAB3D6;
}
#menuleft .top {
  float: right;
  width: 160px;
  color: #FFFFFF;
  font-size: 110%;
  margin: 20px 0px 20px 0px;
  height: 30px;
}
#menuleft .nav {
  width: 160px;
  margin-top: 130px;
  margin: 130px 0 0 0;
  background-color: #BAB3D6
}
#menuleft li {
  width: 130px;
  font-size: 95%;
  line-height: 30px;
  list-style: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
#menuleft li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  vertical-align: middle;
}
#menuleft ul ul li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  vertical-align: middle;
  background-color: #d8d4e8;
}
#menuleft li a:hover {
  background-color: #652D91;
  color: #FFFFFF;
  font-weight: bold;
}
#menuleft li a:active {
  background-color: #ad45c5;
  color: #FFFFFF;
}

<div id="menuleft">
  <h1 class="top">header</h1>

  <ul class="nav">
    <li><a href="#">Main 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 1</a></li>
        </ul>
    </li>
    <li><a href="#">Main 2</a></li>
    <li><a href="#">Main 3</a></li>
    <li><a href="#">Main 4</a></li>
  </ul>
</div>