CSS Dropdown Menu is horizontal not vertical

user_16721906 0
Viewed 388

I'm having trouble figuring out why the dropdown menu goes horizontal. I made a horizontal menu to start with and tried adding a dropdown to it. However, it goes horizontal and I can't figure out why.

I've been racking my brain over this for hours but I don't know what to do.

Please help me.

nav li {
  float: left;
}

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

li a:hover {
  background-color: #111;
}

li:last-child {
  border-right: none;
}

.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
}

#menu-container {
  display: flex;
  width: 100%;
  justify-self: center;
  justify-content: center;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown {
  position: relative;
  z-index: 100;
}

.dropdown {
  display: inline-block;
  margin-left: 10px;
}

.dropdown:hover .dropdown-menu {
  height: auto;
  opacity: 1;
}

.dropdown-menu {
  position: absolute;
  z-index: 90;
  align-items: stretch;
  background-color: rgb(68, 68, 68);
  list-style: none;
  overflow: hidden;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: relative;
  top: 0;
}
<nav class="navbar">
  <div id="menu-container">
    <ul class="nav-menu">
      <li class="nav-item">
        <a class="nav-link" href="#">Men</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link-dropdown" href="#">Women</a>

        <ul class="dropdown-menu">
          <li><a class="nav-link" href="#">New</a></li>
          <li><a class="nav-link" href="#">Tops</a></li>
          <li><a class="nav-link" href="#">Bottoms</a></li>
          <li><a class="nav-link" href="#">Accessories</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Kids</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

drop-down-menu css html
4 Answers

if you write flex instead of block your navbar is shown as vertical because you can style the element on n the vertical side with flex

in CSS in the .new-menu write flex instead of block in display property

.nav-menu {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-direction:column
;
}
user_145860030

In nav-menu class you need to add the property flex-direction and give it the value column.

This will make the cross axis go horizontally and main axis go vertically.

.nav-menu {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-direction:column;
}

More about it in detail here Flex-direction

user_137114730

Dear you have a lot of errors in CSS Try this

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
    <ul>
<li>home</li>
<li>About</li>
<li>Services
            <ul>
<li>Marketing</li>
<li>Design
                    <ul>
<li>Web</li>
<li>Graphics</li>
<li>Interior</li>
</ul>
</li>
<li>Branding</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>

</body>
</html>

CSS Code

*{
margin: 0;
padding: 0;
}
           body{
background-image: url(1.jpg);  
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}

.wrapper{
width: 860px; 
margin: 0 auto;
}
.wrapper ul{
list-style: none;
margin-top: 2%;
}
.wrapper ul li {
background: #262626;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.wrapper ul li:hover{
background: crimson; 
}

.wrapper ul ul{
display: none;
}
.wrapper ul li:hover > ul{
display: block;
}
.wrapper ul ul ul{
margin-left: 170px;
top: 0;
position: absolute;
}
user_59686220

In your css you've provided the selector nav ul. Now what this does, it applies the style to every ul descendent of parent nav. This means it is getting applied even to the dropdown-menu. Hence to specify that it is applicable only to the child we use the child combinator selector nav > div > ul

nav > div > ul {
      display: flex;
      justify-content: space-between;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #333;
      position: relative;
      top: 0;
  }

user_145504720
Related