CODEWITHSUNDEEP
htmlcss
Bima Sakti
Bima Sakti

Reputation: 13

Dropdown doesn't appear

I am confused why my drop-down cannot appear. Could anyone possibly know the issue? Help is appreciated!

I've checked my drop-down with displaying it and it can, but I can't set the drop-down to show up whenever the mouse is hovering on a link. This is my code:

body {
  font-family: Verdana, Geneva, sans-serif;
  padding: 0;
  margin: 0;
}

.ic {
  font-weight: bold;
  margin-right: 5px;
  font-size: .9rem;
}

.wrap {
  background-color: black;
}

#topbar {
  padding: 0;
  width: 1200px;
  /* FOR a static width like Posh CSS */
  height: 50px;
  margin: auto;
  text-transform: uppercase;
  font-size: .8rem;
}

.nospace {
  color: white;
}

li {
  margin: 15px;
}

li.left {
  float: left;
  list-style: none;
}

li.right {
  float: right;
  list-style: none;
}

li a {
  text-decoration: none;
  color: aqua;
}

#banner {
  background: url(bg1.jpg) no-repeat center;
  height: 600px;
  background-size: 1650px;
  opacity: 0.7;
  font-family: 'Forum', cursive;
  font-size: 20px;
}

ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menubar {
  width: 1200px;
  margin: auto;
  display: block;
}

.menubar a {
  padding: 10px;
  color: black;
}

.menubar a:hover {
  background-color: white;
}

.drop-nav {
  position: relative;
}

.drop-nav:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 40%;
  right: 1%;
}

#content {
  padding: 0;
  position: absolute;
  display: none;
  background-color: gray;
  min-width: 120px;
  z-index: 1;
}

#content a {
  color: blue;
  border-bottom: 2px solid black;
  text-decoration: none;
  display: block;
}

#content a:hover {
  background-color: aqua;
}

li .drop-nav a:hover {
  display: block;
}

.wrap01 {
  height: 60px;
  border-bottom: 1px solid gray;
}
<body>
  <div class="Halaman">
    <div class="wrap">
      <div id="topbar">
        <div class="nospace">
          <li class="left"><span class="ic">&#9743;</span> +00 (123) 456 7890</li>
          <li class="left"><span class="ic">&#9993;</span> [email protected]</li>
          <li class="right"><a href="#">Tentang</a></li>
          <li class="right"><a href="#">Kontak</a></li>
          <li class="right"><a href="#">Login</a></li>
          <li class="right"><a href="#">Register</a></li>
          <li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="wrap01">
        <nav class="menubar">
          <li class="left">Sistem Pemberkasan Gudang</li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a class="drop-nav" href="#">Dropdown</a>
            <ul id="content">
              <a href="#">zero 1</a>
              <a href="#">zero 1</a>
            </ul>
          </li>
          <li class="right"><a class="drop-nav" href="#">Halaman</a></li>
          <li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
        </nav>
      </div>
</body>

I have done some research on the internet and W3C but still can't find the answer.

Upvotes: 0

Views: 933

Answers (2)

Toan Lu
Toan Lu

Reputation: 1239

You have the wrong selector at li .drop-nav a:hover

You need to set the #content to display again. Using display: none will prevent you from using transition, so I used visibility & height attribute.

You can check below.

body {
  font-family: Verdana, Geneva, sans-serif;
  padding: 0;
  margin: 0;
}

.ic {
  font-weight: bold;
  margin-right: 5px;
  font-size: .9rem;
}

.wrap {
  background-color: black;
}

#topbar {
  padding: 0;
  width: 1200px;
  /* FOR a static width like Posh CSS */
  height: 50px;
  margin: auto;
  text-transform: uppercase;
  font-size: .8rem;
}

.nospace {
  color: white;
}

li {
  margin: 15px;
}

li.left {
  float: left;
  list-style: none;
}

li.right {
  float: right;
  list-style: none;
}

li a {
  text-decoration: none;
  color: aqua;
}

#banner {
  background: url(bg1.jpg) no-repeat center;
  height: 600px;
  background-size: 1650px;
  opacity: 0.7;
  font-family: 'Forum', cursive;
  font-size: 20px;
}

ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

nav li {
  position: relative;
}

.menubar {
  width: 1200px;
  margin: auto;
  display: block;
}

.menubar a {
  padding: 10px;
  color: black;
}

.menubar a:hover {
  background-color: white;
}

.drop-nav {
  position: relative;
}

.drop-nav:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 40%;
  right: 1%;
}

#content {
  padding: 0;
  visibility: hidden;
  height: 0px;
  background-color: gray;
  z-index: 1;
}

#content a {
  color: blue;
  border-bottom: 2px solid black;
  text-decoration: none;
  display: block;
}

#content a:hover {
  background-color: aqua;
}

li:hover ul#content {
  display: block;
  position: absolute;
  top: 25px;
  left: 0px;
  height: 200px;
  width: 120px;
  visibility: visible;
}

.wrap01 {
  height: 60px;
  border-bottom: 1px solid gray;
}
<body>
  <div class="Halaman">
    <div class="wrap">
      <div id="topbar">
        <div class="nospace">
          <li class="left"><span class="ic">&#9743;</span> +00 (123) 456 7890</li>
          <li class="left"><span class="ic">&#9993;</span> [email protected]</li>
          <li class="right"><a href="#">Tentang</a></li>
          <li class="right"><a href="#">Kontak</a></li>
          <li class="right"><a href="#">Login</a></li>
          <li class="right"><a href="#">Register</a></li>
          <li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="wrap01">
        <nav class="menubar">
          <li class="left">Sistem Pemberkasan Gudang</li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a class="drop-nav" href="#">Dropdown</a>
            <ul id="content">
              <a href="#">zero 1</a>
              <a href="#">zero 1</a>
            </ul>
          </li>
          <li class="right"><a class="drop-nav" href="#">Halaman</a></li>
          <li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
        </nav>
      </div>
</body>

Upvotes: 1

DarknessZX
DarknessZX

Reputation: 686

What you display:none is #content so in your css when you hover it should be

li .drop-nav a:hover #content{ display: block; }

Upvotes: 0

Related Questions