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

时间：2019-03-27 14:25:24

标签： html css

尝试使用CSS和HTML创建下拉导航栏。我无法从导航固定栏中取消嵌套列表。

我遵循了w3schools，但是我开始迷失在代码中。只需要有人查看我的代码即可。我觉得我的代码结构不正确。我注意到在线youtube视频上的人使用li a, .dropbtn之类的东西，但我不理解这些细目。我读过的html / css书说，您可以通过在CSS的多个部分添加空格（例如html body {margin: 0;}）来将CSS应用于HTML的多个部分。此时我迷路了

* {
  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>

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

3 个答案:

答案 0 :(得分：1)

您可能误解了书中的某些内容。使用空格将缩小选择范围，而不是在指定后代时选择多个元素。

使用空格时，是指包含在左侧元素中的右侧元素。就您而言

html body

表示您将元素 html 中的元素 body 定位为目标。

如果使用了以下选择器：

.class1 .class2

它将在class1元素内部处理class 2类的所有元素。 另一方面，逗号仅用于分隔多个选择器，这表示

html, body

CSS属性将同时处理-html和正文。就像示例中一样

.class1, .class2

CSS属性将添加到class1和/或class2的所有元素中，而不管它们的父级为何。

答案 1 :(得分：1)

看起来还不错！基本思想是您必须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>

答案 2 :(得分：0)

我要告诉你的第一件事是，不要关注W3Schools！没有！来到你所做的事情... 

html body {

我坚信您想拥有：

html, body {

上面的逗号很重要。

接下来的事情是，首先隐藏子菜单。可以使用应用于右侧选择器的display: none;来完成此操作，假设您在下拉列表<ul>中有一个<li>。

li ul {display: none;}

因此，谈论以上内容，那就是您出错了。 <ul>内不能有<li>以外的其他对象作为直接子代。您还有另一个<ul>，这是绝对错误的。

即使在W3Schools中，您提供的链接也正确无误：

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

因此，我们将HTML更改为：

<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
      <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>
    <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>

现在，我们需要将<ul>内的<li>悬停在<li>上才能显示。我们可以使用CSS来做到这一点：

li:hover ul {display: block;}

但是您遇到的问题很严重，因为<ul>没有正确地对准它。为此，您需要position ing。

li {
  position: relative;
}
li ul {
  display: none;
  position: absolute;
}
li:hover ul {
  display: block;
}

这很好用，但是存在overflow引起的overflow: hidden问题。现在，将其从nav中删除，以进行排序。剩下的唯一事情就是将<ul>菜单定位在正确的位置。

li ul {
  display: none;
  position: absolute;
  left: -35px;
  background-color: #fff;
  margin: 20px 0 0;
  width: 250px;
  padding: 25px;
}

工作演示

现在您将获得一个很棒的CSS菜单。公平地说，您不需要其余的代码，但是我没有删除它。希望这没事。这是您的最终摘要：

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

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

li {
  position: relative;
}
li ul {
  display: none;
  position: absolute;
  left: -35px;
  background-color: #fff;
  margin: 20px 0 0;
  width: 250px;
  padding: 25px;
}
li:hover ul {
  display: block;
}

.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%;
  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;
}

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
      <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>
    <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>

预览

preview

相关问题
最新问题