Question

这是我的坚果，毁了我的周末。

我发现了这个很棒的可扩展jquery垂直导航菜单。问题是在其他页面上我有无序列表和jquery垂直菜单的无序列表样式影响所有其他无序列表，我不想要那样。 html和内联css等就是这个..........

ul{list-style: none; padding: 0; margin: 0;}
#nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin: 15px 0;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}
      <ul id="nav">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub-Item 1 a</a></li>
        <li><a href="#">Sub-Item 1 b</a></li>
        <li><a href="#">Sub-Item 1 c</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">Sub-Item 2 a</a></li>
        <li><a href="#">Sub-Item 2 b</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>
      <ul>
        <li><a href="#">Sub-Item 3 a</a></li>
        <li><a href="#">Sub-Item 3 b</a></li>
        <li><a href="#">Sub-Item 3 c</a></li>
        <li><a href="#">Sub-Item 3 d</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a>
      <ul>
        <li><a href="#">Sub-Item 4 a</a></li>
        <li><a href="#">Sub-Item 4 b</a></li>
        <li><a href="#">Sub-Item 4 c</a></li>
      </ul>
    </li>
  </ul>

我尝试将css ul更改为#nav ul{list-style: none; padding: 0; margin: 0;}，但这似乎不起作用。请帮帮我这个人。欢呼声。

玩具

Answer 1

通常，当您下载JQuery小部件或thingamabob时，它会出现在一个文件夹中，并附有如何使用它的示例！但我只是在猜测你是不是从JQuery UI直接得到了这个？

在任何情况下，尝试将菜单包装到DIV中，ID =“导航”......

您页面中的其他UL应继承您在上面声明的默认ul样式。

样式特定的无序列表，不影响其他ul

1 个答案: