html - CSS水平菜单，在CSS中添加类选择器导致子菜单关闭位置

Question

我想创建一个水平的两级菜单导航。我在 Internet 上复制了一些代码并且工作正常。下面是原始的CSS样式和HTML

<style>
  /*Style for horizontal CSS menu*/
  ul {
    list-style-type: none;
    position: absolute;
    margin: 0;
    padding: 0;
  }
  ul li {
    float: left;
    margin-right: 1px;
    display: inline-block;
  }
  ul li a {
    display: block;
    text-decoration: none;
    height: 18px;
    min-width: 120px;
    text-align: center;
    line-height: 18px;
    font-family: Arial, "Times New Roman", Georgia;
    color: #ffffff;
    background: #004080;
    font-size: 12px;
  }
  ul li:hover a {
    background: #FFC062;
  }
  ul li:hover ul a {
    background: #d9efff;
    color: #2f3036;
    line-height: 18px;
    height: 18px;
  }
  ul li:hover ul a:hover {
    background: #7db0db;
    color: #ffffff;
  }
  ul li ul {
    display: none;
  }
  ul li ul li {
    display: block;
    float: none;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  ul li ul li:first-child {
    display: block;
    float: none;
    border-top: 1px solid #000;
  }
  ul li ul li a {
    width: auto;
    min-width: 120px;
    padding: 0 15px;
    text-align: left;
    color: #000;
  }
  ul li a:hover + .sub-menu,
  .sub-menu:hover {
    display: block;
  }
</style>


<ul id="hor-menu" class="menu">
  <li style="width:142px">
    <a href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
</ul>

由于 CSS 在标准 ul 和 li 元素上，所以我想添加一个类选择器，以便它只影响水平菜单。所以我将 .menu 附加到每个 ul 样式。但是子菜单将离开主菜单的位置。知道哪种样式出错了吗？

<style>
  /*Style for horizontal CSS menu*/
    ul.menu {
        list-style-type: none;
        position: absolute;
        margin: 0;
        padding: 0;
    }

    ul.menu li {
        float: left;
        margin-right: 1px;
        display: inline-block;
    }

    ul.menu li a {
        display: block;
        text-decoration: none;
        height: 18px;
        min-width: 120px;
        text-align: center;
        line-height: 18px;
        font-family: Arial, "Times New Roman", Georgia;
        color: #ffffff;
        background: #004080;
        font-size: 12px;
    }

    ul.menu li:hover a {
        background: #FFC062;
    }

    ul.menu li:hover ul a {
        background: #d9efff;
        color: #2f3036;
        line-height: 18px;
        height: 18px;
    }

    ul.menu li:hover ul a:hover {
        background: #7db0db;
        color: #ffffff;
    }

    ul.menu li ul {
        display: none;
    }

    ul.menu li ul li {
        display: block;
        float: none;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    ul.menu li ul li:first-child {
        display: block;
        float: none;
        border-top: 1px solid #000;
    }

    ul.menu li ul li a {
        width: auto;
        min-width: 120px;
        padding: 0 15px;
        text-align: left;
        color: #000;
    }

    ul.menu li a:hover + .sub-menu, .sub-menu:hover {
        display: block;
    }
</style>


<ul id="hor-menu" class="menu">
  <li style="width:142px">
    <a href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

检查一下 - 您还遗漏了一些需要应用于 子菜单 的样式。猜猜你现在可以弄清楚了。谢谢!

/*Style for horizontal CSS menu*/

ul.menu, ul.sub-menu {
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
}
ul.menu li, ul.sub-menu li {
  float: left;
  margin-right: 1px;
  display: inline-block;
}
ul.menu li a, ul.sub-menu li a {
  display: block;
  text-decoration: none;
  height: 18px;
  min-width: 120px;
  text-align: center;
  line-height: 18px;
  font-family: Arial, "Times New Roman", Georgia;
  color: #ffffff;
  background: #004080;
  font-size: 12px;
}
ul.menu li:hover a, ul.sub-menu li:hover a {
  background: #FFC062;
}
ul.menu li:hover ul a {
  background: #d9efff;
  color: #2f3036;
  line-height: 18px;
  height: 18px;
}
ul.menu li:hover ul a:hover {
  background: #7db0db;
  color: #ffffff;
}
ul.menu li ul {
  display: none;
}
ul.menu li ul li {
  display: block;
  float: none;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
  display: block;
  float: none;
  border-top: 1px solid #000;
}
ul.menu li ul li a {
  width: auto;
  min-width: 120px;
  padding: 0 15px;
  text-align: left;
  color: #000;
}
ul.menu li a:hover + .sub-menu,
.sub-menu:hover {
  display: block;
}

<ul id="hor-menu" class="menu">
  <li style="width:142px">
    <a href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
</ul>