CODEWITHSUNDEEP
htmlcssnavbar
MariaM
MariaM

Reputation: 11

html/css dropdown not appearing

Been working on a navbar in html/css and the dropdown doesn't appear. I've been playing around with the code but nothing seems to work. Once I delete the display: none from the .dropdown-content class, it seems to appear...

Could anyone please take a look? I've been at it for hours and reading every thread on this issue, but cannot figure it out. Thx in advance!

Here are my css and html snippets: 

body {
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
  background-size: cover;
}

#navdiv {
  opacity: 0.70;
  filter: (opacity=70;
  )
}

#navdiv ul {
  list-style-type: none;
  width: 100%;
  background: white;
  line-height: 3rem;
  float: right;
  overflow: hidden;
}

#navdiv ul a {
  text-decoration: none;
  color: black;
  padding: 2em;
}

#navdiv ul li {
  float: right;
  margin-right: 1em;
}

#logo {
  float: left !important;
  font-size: 2em;
  margin-left: 1em;
}

#navdiv ul #logo:hover {
  background: none;
}

#navdiv ul li a:hover,
dropdown:hover #dropbtn {
  background: #B266FF;
  transition: all 0.8s;
}

li.dropdown {
  display: inline-block;
}

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

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

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

.dropdown:hover .dropdown-content {
  display: inline-block;
}
<body>

  <div id="maindiv">
    <div id="navdiv">
      <ul>
        <li id="logo">Potayto-Potatoh</li>
        <li class="dropdown"><a href="#about">About</a></li>
        <li><a href="#portfolio" id="dropbtn">Portfolio</a>
          <div class="dropdown-content">
            <a href="#">work 1</a>
            <a href="#">work 2</a>
            <a href="#">work 3</a>
          </div>
        </li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</body>

Upvotes: 1

Views: 74

Answers (4)

Jose Manuel Gomez Alvarez
Jose Manuel Gomez Alvarez

Reputation: 2256

The dropdown-content div is not under dropdown div, the parent <li> element lacks the dropdown class specification.

Upvotes: 1

Omar
Omar

Reputation: 527

body {
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
  background-size: cover;
}

#navdiv {
  opacity: 0.70;
  filter: (opacity=70;
  )
}

#navdiv ul {
  list-style-type: none;
  width: 100%;
  background: white;
  line-height: 3rem;
  float: right;
}

#navdiv ul a {
  text-decoration: none;
  color: black;
  padding: 2em;
}

#navdiv ul li {
  float: right;
  margin-right: 1em;
}

#logo {
  float: left !important;
  font-size: 2em;
  margin-left: 1em;
}

#navdiv ul #logo:hover {
  background: none;
}

#navdiv ul li a:hover,
dropdown:hover #dropbtn {
  background: #B266FF;
  transition: all 0.8s;
}

li.dropdown {
  display: inline-block;
}

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

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

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

li:hover div.dropdown-content {
  display: block;
}
<body>

  <div id="maindiv">
    <div id="navdiv">
      <ul>
        <li id="logo">Potayto-Potatoh</li>
        <li class="dropdown"><a href="#about">About</a></li>
        <li><a href="#portfolio" id="dropbtn">Portfolio</a>
          <div class="dropdown-content">
            <a href="#">work 1</a>
            <a href="#">work 2</a>
            <a href="#">work 3</a>
          </div>
        </li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</body>

Upvotes: -1

Stuart
Stuart

Reputation: 6780

Add the trigger class to the li element. Your CSS was also incorrect for the trigger, you wre refering to .dropdown (which is actually a class on the li for "about"!)

See https://jsfiddle.net/qxjbtot1/ for a working example.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

You need to Add dropdown for portfolio li not for about as it doesnt have dropdown-content

Demo

HTML:

  <li  class="dropdown"><a href="#portfolio" id="dropbtn">Portfolio</a>

Upvotes: 3

Related Questions