side menu with drop down menu

Question

I'm trying to create a side menu like the image below.

I want the menu to appear and the link that is active to have a different color. When user clicks on the shop link I want them to be presented with a drop down menu.

html:

<div id="mainSidebar">
 <div id="menu">
  <nav>
     <ul>

      <li><a href="#">SHOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">LEGAL</a></li>
     </ul>
   </nav> 
  </div>    
 </div>

css:

#menu nav ul li  {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;   
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;    
padding-bottom: 5px;
width: 143px;
padding-top: 5px;   
}
#menu nav ul li a:hover{
color: #ffffff;
text-decoration: underline;
}

Answer 1

This seems to be what you're looking for. I only added the first few lines in the CSS.

If you want it to open on click only and not on hover it requires javascript coding.

 body { background: black; color: white; } #menu nav > ul > li > ul { display: none; text-align: right; } #menu nav a { display: block; } #menu nav > ul > li > a { display: block; border-bottom: 3px solid transparent; } #menu nav > ul > li:hover > a { border-bottom: 3px solid white; } #menu nav > ul > li:hover > ul { display: block; } #menu nav ul li { font-size: 11px; top:106px; list-style-type: none; text-decoration: none; color:#ffffff; line-height: 19px; } nav a { color:rgb(153, 153, 153); text-decoration: none; } #mainSidebar { display: block; font-family:arial; font-size: 11px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; height: 450px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 750px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: fixed; text-transform: uppercase; vertical-align: baseline; } #menu nav ul { padding: 0px; line-height: 11.5px; margin-top: 0px; padding-bottom: 5px; width: 143px; padding-top: 5px; } #menu nav ul li a:hover{ color: #ffffff; /* text-decoration: underline; */ } 

 <div id="mainSidebar"> <div id="menu"> <nav> <ul> <li> <a href="#">SHOP</a> <ul> <li><a href="#">T-SHIRT</a></li> <li><a href="#">KNIT</a></li> <li><a href="#">SHIRT</a></li> <li><a href="#">PANTS</a></li> <li><a href="#">ACCESSORY</a></li> </ul> </li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">LEGAL</a></li> </ul> </nav> </div> </div> 

If you want a click-only solution then remove this from CSS:

#menu nav > ul > li:hover > ul {
    display: block;  
}

and add javascript code (requires jQuery):

$('#menu nav > ul > li > a').on('click', function() {
    $(this).siblings('ul').toggle();
});

Answer 2

I decided to go from scratch on this to perhaps give you a different perspective (because why not):

• Using a straight forward HTML structure
• Using transitions for smoother hover events (you can very easily expand this, imagination is mostly your limit).
• Maintaining font integrity.
• Centering the menu on the screen, as described on the picture. You can change this anytime you like easily.
• Using creative liberty to lightly enhance the look/feel.

EDIT Added animation to the underline that runs under the list titles.

 html, body { background-color: black; } .navigation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; margin: 0 auto; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a { display: block; text-decoration: none; padding: 10px; color: lightgray; font-family:arial; font-size: 11px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; } .mainmenu > li { position: relative; } .mainmenu > li > .underline { position: absolute; top: 30px; left: 0; width: 0%; height: 3px; background: white; transition: all 0.7s; } .mainmenu > li:hover > .underline { width: 100%; } .mainmenu li:hover .submenu { display: block; max-height: 200px; } .submenu a { text-align: right; } .submenu a:hover { color: white; } .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } 

 <nav class="navigation"> <ul class="mainmenu"> <li> <a href="#">Shop</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">T&#8211;SHIRT</a></li> <li><a href="">KNIT</a></li> <li><a href="">SHIRT</a></li> <li><a href="">CUT&amp;SEW</a></li> <li><a href="">PANTS</a></li> <li><a href="">ACCESSORY</a></li> </ul> </li> <li> <a href="#">About</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">YOURSELF</a></li> <li><a href="">MYSELF</a></li> <li><a href="">JUAN</a></li> </ul> </li> <li> <a href="#">Contact</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">US</a></li> <li><a href="">MARS</a></li> <li><a href="">EVERYONE</a></li> <li><a href="">DOG</a></li> </ul> </li> <li> <a href="#">Legal</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">OUR PROMISE</a></li> <li><a href="">YOUR PROMISE</a></li> </ul> </li> </ul> </nav> 

Got questions? write them on the comments section :)