Question

我是html和css的新手，我正在尝试在导航栏上创建一个带有子菜单的下拉菜单，但是我的子菜单问题没有显示起来。我已经尝试了几种在线方法，但我似乎无法做到正确。

这是CSS和HTML：

make_subplots

.NavMenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.NavMenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: Crimson;
}
.NavMenu li {
  float: left;
  display: inline;
}
.NavMenu li a:hover {
  background-color: #111;
}
.NavMenu ul ul {
  position: absolute;
  display: none;
}
.NavMenu ul ul ul {
  left: 100%;
  top: 0;
  display: float;
}
.NavMenu li:hover > ul {
  display: block;
}

如果你认为我应该废弃一切并重新开始，那么任何提出这项工作的建议都会非常感激，请随时告诉我。谢谢。 Here is a screenshot of the menu

Answer 1

Coluld，请试试这段代码。 http://codepen.io/nehemc/pen/yJbRga

<style>
.NavMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: Crimson;
    display: inline-block;
    width: 100%;
}
.NavMenu li {
    float: left;
    position:relative;
}
.NavMenu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.NavMenu li a:hover {
    background-color: #111;
}
.NavMenu ul ul {
    position: absolute;
    display: none;
    left:0;
    z-index:999;
}
.NavMenu ul ul li {
    float:none;
}
.NavMenu ul ul ul {
    left: 100%;
    top: 0;
    display: float;
}
.NavMenu li:hover > ul {
    display: block;
}
</style>
<nav class="NavMenu">
<ul>
  <li> <a href="EngHome.html"> My Bilingual Library </a> </li>
  <li> <a> Find Books </a>
    <ul>
      <li> <a href= "Elementary.html"> Elementary </a>
        <ul>
          <li> <a href= "ElemPict.html"> Picture Books </a> </li>
          <li> <a href= "ElemFict.html"> Fiction Books </a> </li>
          <li> <a href= "ElemNFict.html"> Non-Fiction Books </a> </li>
          <li> <a href= "ElemChapt.html"> Chapter Books </a> </li>
        </ul>
      </li>
      <li> <a href= "MidSchool.html"> Middle School </a>
        <ul>
          <li> <a href= "MidAdventure.html"> Adventure </a> </li>
          <li> <a href= "MidFantasy.html"> Fantasy </a> </li>
          <li> <a href= "MidNonFict.html"> Non-Fiction </a> </li>
          <li> <a href= "MidRealFict.html"> Realistic Fiction </a> </li>
          <li> <a href= "MidBiography.html"> Biography </a> </li>
        </ul>
      </li>
      <li> <a href= "HighSchool.html"> High School </a>
        <ul>
          <li> <a href= "HighAdven.html"> Adventure </a> </li>
          <li> <a href= "HighFantasy.html"> Fantasy </a> </li>
          <li> <a href= "HighThrill.html"> Thriller </a> </li>
          <li> <a href= "HighMystery.html"> Mystery </a> </li>
          <li> <a href= "HighPoetry.html"> Poetry </a> </li>
          <li> <a href= "Comedy.html"> Comedy </a> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="Favorites.html"> Favorites </a> </li>
  <li> <a href="Contact.html"> Contact </a> </li>
  <li> <a href="Howto.html"> How to </a> </li>
  <li style= "float:right"> <a href="SpanHome.html"> Espa&#241;ol? </a> </li>
</ul>
</nav>

Answer 2

此处从absolute更改为relative，

NavMenu ul ul {
    position: relative; 
    display: none;
}

让您的嵌套列表显示，之后您需要更多地使用样式，以便它们按照您希望的方式对齐

下拉子菜单不起作用

2 个答案: