CODEWITHSUNDEEP
htmlcss
Nocolay
Nocolay

Reputation: 23

CSS3/HTML5 dropdown menu

Been trying to fix my code for a couple of hours and I just can't. I want to have my navbar have a dropdown function. But I can't seem to make it work.

As you can see I've start on the dropdown menu class, but I can't figure where to go from there. Been googling, and found a lot of examples, tried to copy/paste some of the bits, with no good results. So I was thinking that you might be able to help. 

nav {
  display: block;
  background-color: indianred;
  box-shadow: 0px 10px 5px #888888;
}
nav ul {
  text-align: center;
}
nav ul li {
  display: inline-block;
  padding: 20px;
}
nav ul li a {
  width: 125px;
  color: black;
  padding: 20px;
  background-color: blueviolet;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: aqua;
}
.dropdown {
  display: none;
}
<nav>
  <ul>
    <li><a href="#">FORSIDE</a>
    </li>
    <li><a href="#">ERHVERVSUDDANNELSER</a>
      <ul class="dropdown">
        <li>content 1</li>
        <li>content 1</li>
        <li>content 1</li>
        <li>content 1</li>
      </ul>
    </li>
    <li><a href="#">EUX</a>
    </li>
    <li><a href="#">HTX</a>
    </li>
    <li><a href="#">OM TECH COLLEGE</a>
    </li>
  </ul>
</nav>

Upvotes: 2

Views: 257

Answers (4)

Vaidas
Vaidas

Reputation: 1503

You can try something like this. Didn't want to change too much so the code and UI are still quite messy.

nav {
    display: block;
    background-color: indianred;
    box-shadow: 0px 10px 5px #888888;
}

nav ul {
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 20px;
}

nav ul li a {
    width: 125px;
    color: black;
    padding: 20px;
    background-color: blueviolet;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: aqua;
}

.dropdown {
    display: none;
    position: absolute;
}

nav ul li:hover .dropdown {
    display: block;
}

ul.dropdown li {
  display: block;
  padding: 10px;
}
<nav>
     <ul>
        <li><a href="#">FORSIDE</a></li>
        <li><a href="#">ERHVERVSUDDANNELSER</a>
          <ul class="dropdown">
            <li><a href="#">content 1</a></li>
            <li><a href="#">content 1</a></li>
            <li><a href="#">content 1</a></li>
            <li><a href="#">content 1</a></li>
           </ul>
         </li>
        <li><a href="#">EUX</a></li>
        <li><a href="#">HTX</a></li>
        <li><a href="#">OM TECH COLLEGE</a></li>
    </ul>
</nav>

Upvotes: 0

Shweta
Shweta

Reputation: 1212

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="dropdown">
    <a href="#" 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>

for more detail visit Dropdown Menu in Navbar

Upvotes: 1

narasimhareddy969
narasimhareddy969

Reputation: 13

you need to write css for the element on hover

like 

element1:hover tobeshownele{display:block;}

Upvotes: 0

Albzi
Albzi

Reputation: 15609

Change the CSS to this:

nav {
    display: block;
    background-color: indianred;
    box-shadow: 0px 10px 5px #888888;
}

nav ul {
    text-align: center;
}

nav ul li {
    display: inline-block;
    padding: 20px;
    position:relative;
}

nav ul li a {
    width: 125px;
    color: black;
    padding: 20px;
    background-color: blueviolet;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: aqua;
}

nav ul li ul {
  display:none;
}
nav ul li:hover ul {
  display:block;
  position:absolute;
  background:indianred;
}
<nav>
     <ul>
        <li><a href="#">FORSIDE</a></li>
        <li><a href="#">ERHVERVSUDDANNELSER</a>
         <ul class="dropdown">
             <li>content 1</li>
             <li>content 1</li>
             <li>content 1</li>
             <li>content 1</li>
         </ul>
         </li>
        <li><a href="#">EUX</a></li>
        <li><a href="#">HTX</a></li>
        <li><a href="#">OM TECH COLLEGE</a></li>
    </ul>
</nav>

You wanted to hide the dropdown but then show it when you hover over the dropdown's parent element.

I then made the parent li position:relative; and the dropdown position:absolute so it didn't push any of the other dropdown menu items anywhere it shouldn't be, but didn't style it past giving it a background colour.

Upvotes: 0

Related Questions