How can I create a dropdown menu using only CSS

Question

I am working on a website right now but I am having trouble getting simple CSS to do what I want it to do. I am trying to create a dropdown menu that becomes visible when hovered over on mobile. I have the dropdown menu already created and hidden, and I have the hamburger icon created as well.

I have tried using JavaScript but I literally hate JavaScript. I don't even want to bring that up haha. After I realized I was getting nowhere with JavaScript, I figured I should be able to do it using only CSS. I have re-written the code several times thinking I made a typo that I cannot find.

@media screen and (max-width:768px){

    .topNav{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 10vh;
        width: 300px;
        background-color: #001d4c;
        z-index: 1;
        display:none;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transition: transform 0.5s ease-in;
    } 
    .burger{
        display:block;
    }
    .burger:hover .topNav {
        display:flex;

    }

    }

I expect to be able to have a dropdown menu when the burger is clicked on. The burger btw is just 3 horizontal lines with nothing special attached to them. However, when i try to click on it or hover over it, nothing happens.

When I change the display on the topNav class to flex, it shows the menu perfectly fine, but it is not wanting to show when I hide it until i hover.

Answer 1

You can use the below example..I have opened up my dropdown on hover

 .nav { list-style: none; font-weight: bold; margin-bottom: 10px; float: left; width: 100%; } .nav li { float: left; margin-right: 10px; position: relative; } .nav a { display: block; padding: 5px; color: #fff; background-color: #333; text-decoration: none; } .nav a:hover { color: #fff; background-color: #6b0c36; text-decoration: underline; } /*--- DROPDOWN ---*/ .nav ul { background-color: #fff; background: rgba(255, 255, 255, 0); list-style: none; position: absolute; left: -9999px; } .nav ul li { padding-top: 1px; float: none; } .nav ul a { white-space: nowrap; } .nav li:hover ul { left: 0; } .nav li:hover a { background-color: #6b0c36; text-decoration: underline; } .nav li:hover ul a { text-decoration: none; } .nav li:hover ul li a:hover { background-color: #333; } .nav ul { background-color: #fff; background: rgba(255, 255, 255, 0); list-style: none; position: absolute; left: -9999px; } .nav ul li { padding-top: 1px; float: none; } .nav ul a { white-space: nowrap; } .nav li:hover ul { left: 0; } .nav li:hover a { background-color: #6b0c36; text-decoration: underline; } .nav li:hover ul li a:hover { background-color: #333; }

 <ul class="nav"> <li> <a href="#">About</a> <ul> <li><a href="#">The product</a></li> <li><a href="#">Meet the team</a></li> </ul> </li> </ul>

Answer 2

As per Adrian's comment on your question, there's a compact and standard-conforming example on the W3 Schools website .

Rather than just link the code though, I thought I'd explain it as well to give you a better idea of what's going on and what you need to achieve.

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

The idea is to utilize a Parent and a Child's relationship to eachother when position: attribute is used. Let's see what that CSS is (again, taken from the W3 Schools example):

.dropdown {
  position: relative;
  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);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

The parent .dropdown has its positioning set to relative , which allows it to dynamically position itself with relation to both other elements and its own children.

The child .dropdown-content is initially set to display:none which will remove it from the DOM (it will not be rendered). Its position is set to absolute . Absolute positioning will position content relative to the nearest parent that is either relative or the window object itself. That's why you often see absolute positioning being used to fix something to the top or bottom of screen. Combined with the parent .dropdown having relative positioning, it means our dropdown child will neatly attach itself to its parent (hence why the HTML has the dropdown-content inside the parent).

The only thing left is the hover functionality. Whenever the user hovers over the parent dropdown, the child dropdown will have its display property changed so it appears.

This gives you the functionality and flexibility you're looking for without javascript, and without a particularly complex CSS solution.

Answer 3

Dropdown menu using only CSS

 /* Dropdown container DIV */ .dropdown { position: relative; display: inline-block; } /* Dropdown button */ .dropbtn { display: inline-block; font-weight: 400; cursor: pointer; background-color: #007bff; color: white; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; text-align: center; text-decoration: none; vertical-align: middle; user-select: none; outline: 0; transition: .15s ease-in-out; } .dropbtn:hover { background-color: #0069d9; } /* Dropdown menu (Hidden by Default) */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; padding: 8px 0; background: white; box-shadow: 0 1px 8px 2px rgba(0, 0, 0, 0.2); z-index: 1; } /* Links inside the dropdown menu */ .dropdown-menu a { color: #000; padding: 10px 16px; text-decoration: none; display: block; } /* Change bg-color of dropdown links on hover */ .dropdown-menu a:hover { background-color: #f1f1f1; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-menu { display: block; } /* Caret */ .caret { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 6px dashed; border-right: 6px solid transparent; border-left: 6px solid transparent; } /* Dropdown menu Header */ .dropdown-menu .dropdown-header { color: #777; font-size: .8rem; padding: 8px 16px; }

 <div class="dropdown"> <button class="dropbtn">Dropdown <span class="caret"></span> </button> <div class="dropdown-menu"> <div class="dropdown-header">Dropdown header 1</div> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">Bootstrap</a> <div class="dropdown-header">Dropdown header 2</div> <a href="#">Javascript</a> </div> </div> <p>Mouse over the above button:</p>

Reference: Create an Hoverable Dropdown Menu

Answer 4

here is simple css for your drop down

<div class="wrapper">
  <!-- Sidebar Holder -->
    <ul class="list-unstyled components">
      <li class="active">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
          <li><a href="#">Home 1</a></li>
          <li><a href="#">Home 2</a></li>
          <li><a href="#">Home 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </li>
    </ul>
</div>

CSS Part :

a[data-toggle="collapse"] {
  position: relative;
  border: 1px solid;
  padding: 12px;
}

li {
  margin:25px;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 0;
  top: 14px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

#pageSubmenu,
#homeSubmenu{
 width: 100px;
 border: 1px solid;
 position: relative;
 top: 9px;
}

here is pen to check what have i done.

Answer 5

hi Wil if you want to use a mobile dropdown menu you should use bootstrap. Use bootstrap 3as the bootstrap 4 isstill not supported y some browsers.

Here is a sample code of a collapsible fixed dropdown navbar. Hope this helps you.

 //jquery code for hover dropdown in bootstrap; //The following jquery is for hover dropdown in the menu if u want the dropdown to be clikable just remove the Jquery $(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); }); });

 <link rel="stylesheet" href="design/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="design/bootstrap-3.3.7-dist/js/jquery.min.js"></script> <script src="design/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="salon_home.php">Hair Paradise</a> </div> <div class="navbar-collapse collapse""> <ul class="nav navbar-nav navbar-center"> <li ><a href="salon_home.php"> Home </a></li> <li><a href="salon_about.php"> About us </a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href=""> Services <span class="fa fa-caret-down"><span> </a> <ul class="dropdown-menu"> <li><a href="salon_services.php#services">Hair</a></li> <li><a href="salon_services.php#services">Nail</a></li> <li><a href="salon_services.php#services">Wax</a></li> </ul> </li> <li class="dropdown" > <a class="dropdown" data-toggle="dropdown" href="#"> Hairstyles <span class="fa fa-caret-down"></span> </a> <ul class="dropdown-menu"> <li><a href="salon_hairstyle.php#hairstyle">short</a></li> <li><a href="salon_hairstyle.php#hairstyle">medium</a></li> <li><a href="salon_hairstyle.php#hairstyle">long</a></li> </ul> </li> <li ><a href="salon_booking.php"> Book Online </a></li> <li class="active"><a href="salon_contact.php"> Contact us </a></li> </ul> </div> </div> </nav> </header>

Dont forget to include the bootstrap css and jquery and bootstrap js files. Hope this helps.

Answer 6

This solution is not much different from the given answers, expect that this one is even responsiv.

<nav class="template_nav">
<ul class="navigation">
    <li><a href="#" class="mobile" title="Mobile Navigation">Nav |||</a>
    <ul class="main_nav">
        <li><a href="#" title="Menu-Title">Menu</a></li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</nav>

As you see the html is very simple and easy to modify. The classes are used to show how easy it would be to attach different styles to it.

The css is split in two simple parts, one for desktops and one for mobile devices, to support any devices it would be recommend to improve it for mobile devices.

    * {
        margin : 0;
        padding : 0;
    }
    ul,li {
        list-style-type : none;
    }
    a {
        color : #f11df4;
        font-style : italic;
        text-decoration : none;
    }
    a:hover {
        color : #f313f7;
    }
    a:active {
        color : #f13df4;
    }
    a:visited {
        color : #f56cf7;
    }
    @media screen and (min-width:1024px) {
    .template_nav {
        float : left;
        margin-bottom : 2%;
        width : 100%;
        height : 100px;
        background : #000;
    }   
    .navigation{
        padding-top : 30px;
    }
    .mobile {   
        display : none;
    }
    .main_nav li {  
        float : left;   
        width : 150px;  
        padding : 10px;
    }
    .main_nav li ul {   
        display:none;
    } 
    .main_nav li:hover ul { 
        position : relative;    
        z-index : 5;    
        display : block;
    }
    .sub_menue_link {
        background : #000;
        border-bottom : 1px dotted #353535;
    }
    }

    @media screen and (max-width:1023px) {
    .template_nav {
    float : left;
    margin-bottom : 2%;
    width : 100%;
    height : 60px;
    background : #000;
    }   
    .navigation li {
        float : left;
        width : 96%;
        padding : 2%;
        text-align : center;
    }
    .navigation li ul {
        display:none;
    } 
    .navigation li:hover ul {
        position : relative;
        z-index : 5;
        display : block;
    } 
    .main_nav li {
        background : #000;
        border-bottom : 1px dotted #353535;
    }
    .sub_menue, .sub_menue_link {
        display : none;
    }  
    }

Here is a fiddle that shows that this simple solution works: https://jsfiddle.net/Thorske/327v0jnc/4/