jquery-html 手风琴菜单

Question

我的子菜单有问题。因为它位于<li> 中，所以子菜单会随着主菜单的颜色切换。我找到了我的问题，但我不知道如何解决它。这是因为填充。

这是我的 CSS：

#menu li{
   margin-top: 1px;  
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #1a1a1a;
   text-decoration: none;    
}
#menu li ul li{
   border: 0;
   margin: 0;
   display: none;
   background-color: #232323;
   text-indent: 15px;
   height: auto;
}

这是我的 jquery：

     $('#menu').find('li').click(function(){
         $(this).find('ul>li').fadeToggle('fast');
     });

和html：

<ul id="menu">
   <li class="first current"><a id='home'>Home</a></li>
   <li class="has_current"><a id='#'>About</a>
<ul>
    <li class="first current"><a id='home'>Sub1</a></li>
    <li class="last current"><a id='home'>Sub2</a></li>
</ul>
</li>

我找到了解决方案。我将padding-bottom 和padding-top 替换为line-height，它起作用了

Answer 1

好的，我在这里创建了一个示例jsfiddle，但无法重现该问题。

顺便说一句，您用于内部列表的颜色太暗，所以我将其更改为浅色以便能够看到一些东西：

#menu li ul li{
   border: 0;
   margin: 0;
   display: none;
   background-color: **#ccc**;
   text-indent: 15px;
   height: auto;
}

Answer 2

要摆脱嵌套列表（或子导航）中的父background-color，您需要设置padding-left: 0;。要摆脱子弹，您可以使用list-style: none;。以下是如何做到这一点的示例：

#menu,
#menu > li > ul {
    list-style: none;
    padding-left: 0;
}

Example JSFiddle for above

接下来，您提到（在上面的 cmets 中）您希望将链接集中在父列表和子导航列表中。为此，您可以执行以下操作。这样做的目的是在 ID 为 #menu 的元素中获取所有 <a> 和前面的 <li>，并将它们设置为显示为块级元素以及居中文本。

#menu li > a {
    display: block;
    text-align: center;
    color: white; /* added so you can see the links better */
}

从第一个示例构建，here is an updated JSFiddle 带有居中链接。