html - 退出嵌套列表 CSS/HTML 后，将鼠标悬停在菜单列表项上会关闭菜单

Question

我创建了一个 fiddle 来演示我面临的问题:

https://jsfiddle.net/04o67okd/

我有一些嵌套列表用作导航菜单。如果将鼠标悬停在“元素 5”上，您将看到一个下拉菜单，然后如果将鼠标悬停在“元素编号 3”上，您将看到另一个下拉菜单。问题是我无法到达属于最深嵌套列表父级的元素，这些元素是最深嵌套菜单(“菜单子(monad)元素编号 4”和“菜单子(monad)元素编号 4”)。

你能帮我找出问题吗？

<nav class="navbar">
    <a class="header" href="#">Badge</a>
    <ul class="primary">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
        <li>
            <a href="#">Menu Item 4</a>
            <ul class="dropdown">
                <li><a href="#">Menu Sub Item Number 1 for testing</a></li>
                <li><a href="#">Menu Sub Item Number 2</a></li>
                <li><a href="#">Sub Item Number 3</a></li>
                <li><a href="#">Item Number 4</a></li>
                <li><a href="#">Menu Sub Item Number 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 5</a></li>
        <li><a href="#">Menu Item 6</a></li>
        <li>
            <a href="#">Menu Item 7</a>
            <ul class="dropdown">
                <li><a href="#">Menu Sub Item Number 1</a></li>
                <li><a href="#">Menu Sub Item Number 2</a></li>
                <li>
                    <a href="#">Item Number 3</a>
                    <ul class="dropdown">
                        <li><a href="#1">Sub Item Number 1</a></li>
                        <li><a href="#2">Sub Item Number 2</a></li>
                        <li><a href="#3">Sub Item Number 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu Sub Item Number 4</a></li>
                <li><a href="#">Menu Sub Item Number 5</a></li>
            </ul>
        </li>
    </ul>
</nav>

和属于CSS:

* {
    box-sizing: border-box;
    font-family: Courier; font-size: 14px; line-height: 24px;
    margin: 0px; padding: 0px;
}

body {
    background-color: #EFEFEF;
}

ul { list-style: none; }

.navbar {
    background-color: #333;
    width: 100%;
}
.navbar .header {
    float: left;
    color: #DDD;
    padding: 7px 0px;
    margin-left: 15px;
    display: block;
}
.navbar a {
    text-decoration: none;
    color: #DDD;
}
.navbar li {
    cursor: pointer;
}
.navbar .primary {
    float: right;
}
.navbar .primary li {
    position: relative;
    float: left;
}
.navbar .primary li:hover ul, .navbar .primary li:active ul {
    display: block; 
}
.navbar .primary .dropdown li:hover ul {
    display: block;
}
.navbar .primary li a {
    float: none;
    color: #DDD;
    padding: 7px 0px 7px 25px;
    display: block;
}
.navbar .primary > li:last-child {
    margin-right: 15px;
}
.navbar .primary .dropdown {
    position: absolute;
    top: 100%;
    right: 0px;
    z-index: 1000;
    min-width: 220px;
    max-width: 320px;
    background-color: #FFF;
    display: none;
}
.navbar .primary .dropdown > li > ul {
    position: relative;
    display: none;  
}
.navbar .primary .dropdown > li > ul li:hover, .navbar .primary .dropdown > li > ul li:active {
    background: #FFF;
}
.navbar .primary .dropdown li {
    position: relative;
    width: 100%;
    margin: 0px;
}
.navbar .primary .dropdown li:hover, .navbar .dropdown li:active {
    background-color: #ECECEC;
}
.navbar .primary .dropdown li a {
    color: #333;
    padding: 7px;
}
.navbar::after, .navbar .primary::after {
    content: " ";
    display: block;
    clear: both;
}

Answer 1

可以让三级导航右开

下面是更新的代码。

我添加了以下几行。

.navbar .primary .dropdown li .dropdown{
    right: 220px;
    margin-top: -38px;
    position: absolute;
}

* {
  box-sizing: border-box;
  font-family: Courier;
  font-size: 14px;
  line-height: 24px;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #EFEFEF;
}

ul {
  list-style: none;
}

.navbar {
  background-color: #333;
  width: 100%;
}

.navbar .header {
  float: left;
  color: #DDD;
  padding: 7px 0px;
  margin-left: 15px;
  display: block;
}

.navbar a {
  text-decoration: none;
  color: #DDD;
}

.navbar li {
  cursor: pointer;
}

.navbar .primary {
  float: right;
}

.navbar .primary li {
  position: relative;
  float: left;
}

.navbar .primary li:hover ul,
.navbar .primary li:active ul {
  display: block;
}

.navbar .primary .dropdown li:hover ul {
  display: block;
}

.navbar .primary li a {
  float: none;
  color: #DDD;
  padding: 7px 0px 7px 25px;
  display: block;
}

.navbar .primary>li:last-child {
  margin-right: 15px;
}

.navbar .primary .dropdown {
  position: absolute;
  top: 100%;
  right: 0px;
  z-index: 1000;
  min-width: 220px;
  max-width: 320px;
  background-color: #FFF;
  display: none;
}

.navbar .primary .dropdown>li>ul {
  position: relative;
  display: none;
}

.navbar .primary .dropdown>li>ul li:hover,
.navbar .primary .dropdown>li>ul li:active {
  background: #FFF;
}

.navbar .primary .dropdown li {
  position: relative;
  width: 100%;
  margin: 0px;
}

.navbar .primary .dropdown li:hover,
.navbar .dropdown li:active {
  background-color: #ECECEC;
}

.navbar .primary .dropdown li a {
  color: #333;
  padding: 7px;
}

.navbar::after,
.navbar .primary::after {
  content: " ";
  display: block;
  clear: both;
}

.navbar .primary .dropdown li .dropdown {
  right: 220px;
  margin-top: -38px;
  position: absolute;
}

<nav class="navbar">
  <a class="header" href="#">Badge</a>
  <ul class="primary">
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="#">Item 2</a>
      <ul class="dropdown">
        <li><a href="#">Menu Sub Item Number 1 for testing</a></li>
        <li><a href="#">Menu Sub Item Number 2</a></li>
        <li><a href="#">Sub Item Number 3</a></li>
        <li><a href="#">Item Number 4</a></li>
        <li><a href="#">Menu Sub Item Number 5</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
      <a href="#">Item 5</a>
      <ul class="dropdown">
        <li><a href="#">Menu Sub Item Number 1</a></li>
        <li><a href="#">Menu Sub Item Number 2</a></li>
        <li>
          <a href="#">Item Number 3</a>
          <ul class="dropdown">
            <li><a href="#1">Sub Item Number 1</a></li>
            <li><a href="#2">Sub Item Number 2</a></li>
            <li><a href="#3">Sub Item Number 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Sub Item Number 4</a></li>
        <li><a href="#">Menu Sub Item Number 5</a></li>
      </ul>
    </li>
  </ul>
</nav>