'Trying to make an Horizontal Dropdown Menu in HTML/CSS

I'm trying to add an horizontal dropdown menu in my code. The dropdown menu is supposed to be under the more bar. The bar is meant to display music tv weather and sounds, I am not using bootstrap and any font and I want to still make it happen.

* {
  margin: 0px;
}

.navbar {
  width: 100%;
  height: 37px;
  background-color: black;
}

ul>li {
  margin: -2px;
  padding: 20px 40px;
  padding-bottom: 7px;
  color: white;
  display: inline;
  list-style-type: none;
  position: relative;
  left: 150px;
  bottom: 30px;
  border: 0.1px solid white;
  border-bottom: none;
  text-decoration: none;
}

ul>li>a {
  color: white;
  text-decoration: none;
}

#search-box {
  height: 20px;
  position: absolute;
  top: 5px;
  left: 1320px;
}

#more {
  text-align: left;
  padding-right: 70px;
  padding-left: 20px;
}

#account {
  padding: 50px;
  padding-bottom: 7px;
  margin-right: -52px;
  text-align: center;
  color: white;
  position: relative;
  left: 100px;
  bottom: 30px;
  border: 1px solid white;
  border-bottom: none;
}

#account:hover {
  cursor: pointer;
  border-bottom: 4px solid red;
}

#home:hover {
  cursor: pointer;
  border-bottom: 4px solid green;
}

#news:hover {
  cursor: pointer;
  border-bottom: 4px solid blue;
}

#sport:hover {
  cursor: pointer;
  border-bottom: 4px solid yellow;
}

#reel:hover {
  cursor: pointer;
  border-bottom: 4px solid darkblue;
}

#worklife:hover {
  cursor: pointer;
  border-bottom: 4px solid darkgreen;
}

#travel:hover {
  cursor: pointer;
  border-bottom: 4px solid yellowgreen;
}

#future:hover {
  cursor: pointer;
  border-bottom: 4px solid darkred;
}

#more:hover {
  cursor: pointer;
  border-bottom: 4px solid white;
}

#search-icon {
  width: 22.5px;
  height: 22.6px;
  position: absolute;
  top: 5.96px;
  left: 1489px;
  border: 1px solid white;
  background: white;
}

#bbc-logo {
  width: 100px;
  height: 30px;
  position: absolute;
  bottom: 704px;
  left: 22px;
  background: white;
}

.dropdown {
  width: 100%;
  height: 37px;
  border: 1px solid grey;
  background-color: white;
  position: absolute;
  top: 35px;
  left: 0px;
  text-decoration: none;
}

div>li {
  height: 200px;
  font-size: 19px;
  position: relative;
  right: 10px;
  top: 6px;
  margin-left: 200px;
  display: inline;
}

ul>div>li>a {
  color: black;
  text-decoration: none;
}

.dropdown:hover {
  transform: translateY(20px);
  transition: all 5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BBC Clone</title>
  <link rel="stylesheet" href="styles.css "> </head>

<body>
  <div class="navbar"></div>
  <img id="bbc-logo" src="./BBC_logo.png" alt="BBC_logo">
  <ul>
    <li id="account"><a href="#">BBC Account</a></li>
    <li id="home"><a href="#">Home</a></li>
    <li id="news"><a href="#">News</a></li>
    <li id="sport"><a href="#">Sport</a></li>
    <li id="reel"><a href="#">Reel</a></li>
    <li id="worklife"><a href="#">Worklife</a></li>
    <li id="travel"><a href="#">Travel</a></li>
    <li id="future"><a href="#">Future</a></li>
    <li id="more"><a href="#">More</a>
      <div class="dropdown">
        <li id="music"><a href="#">Music</a></li>
        <li id="tv"><a href="#">TV</a></li>
        <li id="weather"><a href="#">Weather</a></li>
        <li id="sounds"><a href="#">Sounds</a></li>
      </div>
    </li>
    <div>
      <label for="Search BBc"></label>
      <input type="text" name="Search on BBC" placeholder="Search" id="search-box">
      <img id="search-icon" src="./585e4ad1cb11b227491c3391.png" alt="Search icon">
    </div>

  </ul>
</body>

</html>
htmlcssdrop-down-menuonclick


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions