菜单由ul创建并填充第二级

Question

这是我的codepen。

我使用ul创建菜单。这是我的HTML代码。

＆＃13;

＆＃13;

$('.navbar').find('.active').show();

$('.a-node').on('click', function() {
  $('.active').removeClass('active').hide();
  $(this).siblings('ul').addClass('active').show();
});

＆＃13;

.navbar {
  width: 200px;
}

.navbar ul {
  list-style-type: none;
  padding-left: 0pt;
}

.navbar>ul>li ul {
  display: none;
}

.navbar ul li {
  background: #eeeeee;
}

.navbar ul li a {
  width: 89%;
  padding: 5% 0 5% 10%;
  display: inline-block;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid #9d9d9d;
}

.navbar ul li a:hover {
  background: red;
}

.ul-level2 li {
  margin-left: 20%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul class="ul-level1">
    <li>
      <a href="#" class="a-node">1</a>
      <ul class="ul-level2 active">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a href="#" class="a-node">2</a>
      <ul class="ul-level2">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a href="#">3</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望第二级的线下和悬停颜色与第一级相同。

结果就是这样。

我想要这个。

谢谢你的帮助。

Answer 1

将此css添加到您的代码中

.ul-level2 li:hover {
      background: red;
}

另外，请在以下代码中将margin-left: 20%更改为padding-left: 20%

.ul-level2 li  {
      margin-left: 20%; // Change this into padding-left: 20%
 }

以下是工作代码段

＆＃13;

＆＃13;

$('.navbar').find('.active').show();

$('.a-node').on('click', function() {
  $('.active').removeClass('active').hide();
  $(this).siblings('ul').addClass('active').show();
});

＆＃13;

.navbar {
  width: 200px;
}

.navbar ul {
  list-style-type: none;
  padding-left: 0pt;
}

.navbar > ul > li ul {
  display: none;
}

.navbar ul li {
  background: #eeeeee;
}

.navbar ul li a {
  width: 89%;
  padding: 5% 0 5% 10%;
  display: inline-block;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid #9d9d9d;
}

.navbar ul li a:hover {
  background: red;
}

.ul-level2 li  {
  padding-left: 20%;
}

.ul-level2 li:hover {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul class="ul-level1">
    <li>
      <a href="#" class="a-node">1</a>
      <ul class="ul-level2 active">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a href="#" class="a-node">2</a>
      <ul class="ul-level2">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a href="#">3</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;