CODEWITHSUNDEEP
htmlcss
Yabusa
Yabusa

Reputation: 579

Stuck creating nested drop down navigation menu

Attempting to make a drop down navigation bar using CSS and HTML. I can't get the nested list to dis-attach from the Navigation fixed bar.

I followed w3schools, but I'm beginning to get lost in the code. Just need someone to look over my code. I feel I'm not structuring my code correctly. I notice people on online youtube videos using things like li a, .dropbtn I don't understand the breakdown of this. The html/css book I read said that you can apply CSS to multiple sections of HTML by adding them with a space, for example html body {margin: 0;}. I'm just lost at this point

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

I expect it to create a secondary nav below the current fixed nav bar, but it just creates a list next to the tab I want to drop down.

Upvotes: 0

Views: 408

Answers (3)

coops
coops

Reputation: 1714

It's not looking too bad! The basic idea is you have to display: none your sub-menu, then on hover of the parent, display it :-)

I've amended your code slightly below to show you what I mean.

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

Upvotes: 1

Entalpia
Entalpia

Reputation: 787

You possibly misunderstood something in your book. Using the space will narrow down your selection instead of choosing multiple elements, as you're specifying the descendants.

When you use space, you mean the element to the right contained within the element on the left. In your case 

html body

means you are targeting element body within the element html.

If you used the following selector:

.class1 .class2

it would address all the elements with class class2 inside of the elements with class1. On the other hand, comma is used only to separate multiple selectors, meaning that for 

html, body

the CSS properties will address both - the html and the body. Just like in the example

.class1, .class2

the CSS properties will be added to all elements with class1 and/or class2, regardless of their parents.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

The first thing I would ever tell you is, don't follow W3Schools! No! Coming to what you have done...

html body {

I strongly believe you wanna have:

html, body {

The comma above matters a lot.

Next thing is, hide the submenu initially. This can be done using display: none; applied to the right selector, assuming, you have got a <ul> inside a dropping down <li>.

li ul {display: none;}

So talking about the above stuff, that's where you went wrong. A <ul> cannot have anything other than <li> inside it as a direct child. You have another <ul>, which is absolutely wrong.

Even in W3Schools, the link you provided, they have it right:

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

So let's change your HTML to:

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

Now, we need to get the <ul> inside the <li> to display when you hover over the <li>. We can do it with CSS this way:

li:hover ul {display: block;}

But the problem you face is bad, as the <ul> is not correctly aligned to it. For this, you need positioning.

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

This works fine, but there's a problem of the overflow issue caused by overflow: hidden. Let's get that sorted now by removing it from the nav. The only thing left is to position the <ul> menu right way.

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

Working Demo

Now you get an awesome CSS menu. To be fair, you don't need the rest of the code, but I have not removed it. Hope this is alright. Here's your final snippet:

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

preview

Upvotes: 0

Related Questions