垂直手风琴菜单 css答案

【问题标题】：Vertical accordion menu css垂直手风琴菜单 css
【发布时间】：2014-12-11 07:32:06
【问题描述】：

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

【问题讨论】：

您具体要调整什么？您介意添加 JS 以使 JSfiddle 正常运行吗？要选择子菜单进行调整，您需要使用#menuleft ul li ul 来选择子菜单。
子菜单位置不正确，它们必须在 Main 1 和 Main 2 之间，以便我可以显示和隐藏它

标签： jquery css menu submenu

【解决方案1】：

从#menuleft ul 中删除position: absolute 并定位到上边距。
删除#menuleft li上的height
给顶层ul一个类（这里是.nav）并设置它的样式而不是#menuleft ul 这样第二级uls 就没有样式了。
为.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>

【讨论】：

excuseme @misterManSam 似乎如果我删除通用选择器，我的边距和填充有问题 *
别担心，把它放在之前其他一切：ul,li { margin: 0; padding: 0; }
我应该把它放在第一位 :) - 我更新了答案。
我有一个小问题，当我展开子菜单时背景不统一，我可以解决这个问题吗？ link
@AlbertoAlibaba - 问题是由a 上的 100% 宽度引起的。我也删除了ul 和li 上所有不需要的宽度。 a 不需要 100% 的高度/宽度，因为 display: block 元素会自动占用其父级的宽度和高度。 Here is your new example:D

【解决方案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%;
}

【讨论】：