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

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

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

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

jquery-html手风琴菜单

2 个答案: