Question

我需要调整手风琴垂直菜单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

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

#menuleft li

为顶级ul提供一个类（此处为.nav）并设置样式而不是#menuleft ul 因此第二级ul未设置样式。
为.nav提供与#menuleft相同的背景。这将确保即使在非常小的高度，链接背后也有背景。

另外，请确保从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>

Answer 2

我认为当我们将鼠标悬停在tag li之后和展示ul sub-menu之后。我认为这段代码是css。

/* This is my code */
#menuleft ul li ul {
    visibility: hidden;
    height: 0;
}

#menuleft ul li:hover ul {
    visibility: visible;
    height: 100%;
}

垂直手风琴菜单css

2 个答案:

演示