Jquery 垂直手风琴菜单

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

在此之后，我将jquery用于展开和折叠子菜单 提前谢谢你的帮助

这是

更新

有了misterManSam的帮助，它现在可以工作了，但我仍然有一个小问题，当我展开子菜单时，它们的背景并不一致，正如您所看到的，它会发出一点咔哒声，这是JFIDLE

• 从

  #menuleft ul

  中删除

  位置：绝对

  ，并用上边距定位

• 移除

  #menuleft li上的
  高度
  

• 给顶级的

  ul

  一个类（这里是

  .nav

  ）和样式，而不是

  #menuleft ul

  因此，第二级

  ul

  s未设置样式

• 为

  .nav

  提供与

  #menuleft

  相同的背景。这将确保即使在非常小的高度，链接背后也有背景

此外，确保从

ul

和列表项中删除所有默认边距和填充

演示

ul，li{margin:0；padding:0；}
#梅努列夫特{
位置：绝对位置；
底部：0px；
左：100px；
身高：100%；
宽度：160px；
背景色：#BAB3D6；
}
#梅努里夫特，上{
浮动：对；
宽度：160px；
颜色：#FFFFFF；
字体大小：110%；
保证金：20px 0px 20px 0px；
高度：30px；
}
#导航菜单{
宽度：160px；
边缘顶部：130像素；
利润率：130px0；
背景色：#BAB3D6
}
#李曼努列夫特{
宽度：130px；
字体大小：95%；
线高：30px；
列表样式：无；
光标：指针；
填充：0；
保证金：0；
}
#梅努列夫特·李a{
文字装饰：无；
显示：块；
宽度：100%；
身高：100%；
左侧填充：30px；
垂直对齐：中间对齐；
}
#梅努勒夫特·乌尔利·李a{
文字装饰：无；
显示：块；
宽度：100%；
身高：100%；
左侧填充：30px；
垂直对齐：中间对齐；
背景色：#d8d4e8；
}
#梅努列夫特·李a：悬停{
背景色：#652D91；
颜色：#FFFFFF；
字体大小：粗体；
}
#menuleft li a：活动{
背景色：#ad45c5；
颜色：#FFFFFF；
}

标题

我想当我们悬停在

标签

li

和显示

ul子菜单后。我认为这段代码是css

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

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

你具体想调整什么？您是否介意在JS中添加一些内容，以便JSFIDLE能够正常工作？要选择子菜单进行调整，您需要使用
#menuleft ul li ul
来选择子菜单。子菜单位置不正确，它们必须位于主菜单1和主菜单2之间，以便我可以显示和隐藏itexcuseme@misterManSam。如果卸下通用选择器，我的边距和填充似乎有问题*不用担心，把这个放在最前面：
ul，li{margin:0；padding:0；}
我应该把它放在第一位：）-我更新了答案。我有一个小问题，当我展开子菜单时，背景不一致，我能解决吗@AlbertoAlibaba-问题是由
a
上的100%宽度引起的。我已经删除了
ul
和
li
上所有不需要的宽度。在
a
上不需要100%的高度/宽度，因为
display:block
元素将自动占用其父元素的宽度和高度：D
/* This is my code */
#menuleft ul li ul {
    visibility: hidden;
    height: 0;
}

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