时间戳

首页 > 解决方案 > 卡住创建嵌套的下拉导航菜单

html - 卡住创建嵌套的下拉导航菜单

问题描述

尝试使用 CSS 和 HTML 制作下拉导航栏。我无法将嵌套列表从导航固定栏中取消附加。

我关注了w3schools，但我开始迷失在代码中。只需要有人查看我的代码。我觉得我的代码结构不正确。我注意到在线 youtube 视频上的人们使用了li a, .dropbtn我不明白这其中的原因之类的东西。我阅读的 html/css 书说，您可以通过添加空格将 CSS 应用于 HTML 的多个部分，例如html body {margin: 0;}. 我只是在这一点上迷路了

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

html body {
  margin: 0;
  padding: 0;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  font-size: 20px;
  float: left;
  border-radius: 0px;
  border: none;
  width: 100%;
  overflow: hidden;
  margin: 0;
  list-style-type: none;
  padding: 25px;
  display: flex;
  list-style: none;
  flex-direction: row;
  /* vertical alignement */
  align-items: center;
  /* how you want horizontal distribution */
  /* space-evenly | space-around | space-between */
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
}

.printing {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  color: #2F4F4F;
}

.printing>li {
  display: none;
  background-color: #2F4F4F;
  position: absolute;
  z-index: 1;
  color: black;
}



.flex-container {
    display: flex;
	flex-direction: column;
	margin: 0;
	padding-top: 100px;
}
	
.flex-container > div {
  	text-align: center;
	margin: 0;
	padding: 0;
}
	  	
@media screen and (max-width:500px) {
	.column {
		width: 100%;
	}
}
ul {
  list-style: none;
}
<nav>
  <ul class="nav">
    <li class="item">
      <a href="main.html">
        <img src="Images/Navigation/Full Intak Logo-01.png" alt="Home" />
      </a>
    </li>
    <li class="printing">Printing</li>
    <ul>
      <li>Labels & Stickers</li>
      <li>Banners</li>
      <li>A-Frame</li>
      <li>Menu Boards</li>
      <li>Takeout Menus</li>
      <li>Business Cards</li>
      <li>Dine-In Menus</li>
      <li>Posters</li>
      <li>Books</li>
      <li>Envelopes</li>
      <li>Chinese Wedding Cards</li>
      <li>Flyers</li>
      <li>Letterheads</li>
      <li>Brochures</li>
      <li>Vinyl</li>
      <li>NCR Forms</li>
      <li>Catalogues</li>

    </ul>
    <li class="item">Graphic Design</li>
    <li class="item">Chinese Calendars</li>
    <li class="item">FAQS</li>
    <li class="item">Contact Us</li>
  </ul>
</nav>

<body>

<div class="flex-container"

<div><img src="Images/Printing/Dinner Menus-01.jpg" style="max-width:100%;height:auto;" alt="Banners" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Posters" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Poster" /></div>	

</div>
</body>

我希望它在当前固定导航栏下方创建一个辅助导航，但它只是在我要下拉的选项卡旁边创建一个列表。

标签： htmlcss

解决方案

看起来还不错！基本思想是您必须进入display: none子菜单，然后在父级悬停时显示它:-)

我在下面稍微修改了您的代码，以向您展示我的意思。

.nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.sub-menu {
  display: none;
  position: absolute;
}

ul {
  list-style: none;
  padding: 0;
}

.item.has-children:hover .sub-menu {
  display: block;
}
<nav>
  <ul class="nav">
    <li class="item">
      <a href="main.html">
        <img src="Images/Navigation/Full Intak Logo-01.png" alt="Home" />
      </a>
    </li>
    <li class="item has-children">Printing
      <ul class="sub-menu">
        <li>Labels & Stickers</li>
        <li>Banners</li>
        <li>A-Frame</li>
        <li>Menu Boards</li>
        <li>Takeout Menus</li>
        <li>Business Cards</li>
        <li>Dine-In Menus</li>
        <li>Posters</li>
        <li>Books</li>
        <li>Envelopes</li>
        <li>Chinese Wedding Cards</li>
        <li>Flyers</li>
        <li>Letterheads</li>
        <li>Brochures</li>
        <li>Vinyl</li>
        <li>NCR Forms</li>
        <li>Catalogues</li>
      </ul>
    </li>
    <li class="item">Graphic Design</li>
    <li class="item">Chinese Calendars</li>
    <li class="item">FAQS</li>
    <li class="item">Contact Us</li>
  </ul>
</nav>

推荐阅读