How to create only CSS (vertical) drop-down menu?

Question

Good afternoon,

My current task is to create several stylesheets for the website. One of the website styles requires me to create a drop-down menu, but I’m not allowed to change the HTML code at all, so basically I’m asked to create a drop-down menu with CSS only.

Here is the HTML code that should appear as a drop-down menu:

<div id="global-nav"> <ul> <li><a href="#products">Products</a> <ul> <li><a href="#widgets">Widgets</a></li> <li><a href="#sites">Sites</a></li> <li><a href="#gadgets">Gadgets</a></li> </ul> </li> </ul> 

However, there are other requirements: There should not be any points or circles preceding each element of the list.

I am wondering if this task can only be done with CSS or not. Is there a way to do this using CSS?

Answer 1

Vertical menu with horizontal expansion

jsBin demo

 *{padding:0;margin:0;} body{font:16px/1 sans-serif} /*VERTICAL MENU*/ nav.vertical{ position:relative; width:200px; } /* ALL UL */ nav.vertical ul{ list-style: none; } /* ALL LI */ nav.vertical li{ position:relative; } /* ALL A */ nav.vertical a{ display:block; color:#eee; text-decoration:none; padding:10px 15px; background:#667; transition:0.2s; } /* ALL A HOVER */ nav.vertical li:hover > a{ background:#778; } /* INNER UL HIDE */ nav.vertical ul ul{ position:absolute; left:0%; top:0; width:100%; visibility:hidden; opacity:0; transition: transform 0.2s; transform: translateX(50px); } /* INNER UL SHOW */ nav.vertical li:hover > ul{ left:100%; visibility:visible; opacity:1; transform: translateX(0px); } 

 <nav class="vertical"> <ul> <li><a href="">Home</a></li> <li><a href="#">Products +</a> <ul> <li><a href="#">Widgets</a></li> <li> <a href="#">Sites +</a> <ul> <li><a href="#">Site 1</a></li> <li><a href="#">Site 2</a></li> </ul> </li> <li> <a href="#">Gadgets +</a> <ul> <li><a href="#">Gadget 1</a></li> <li><a href="#">Gadget 2</a></li> </ul> </li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav> 

Vertical menu (mobile only)

this is best suited for mobile devices (fewer CSS screens), otherwise show / hide will troll using User Experience

jsBin demo

 *{padding:0;margin:0;} body{font:16px/1 sans-serif} /*VERTICAL MENU*/ nav.vertical{ position:relative; background:#667; } /* ALL UL */ nav.vertical ul{ list-style: none; } /* ALL LI */ nav.vertical li{ position:relative; } /* ALL A */ nav.vertical a{ display:block; color:#eee; text-decoration:none; padding:10px 15px; transition:0.2s; } /* ALL A HOVER */ nav.vertical li:hover > a{ background:#778; } /* INNER UL HIDE */ nav.vertical ul ul{ background:rgba(0,0,0,0.1); padding-left:20px; transition: max-height 0.2s ease-out; max-height:0; overflow:hidden; } /* INNER UL SHOW */ nav.vertical li:hover > ul{ max-height:500px; transition: max-height 0.25s ease-in; } 

 <nav class="vertical"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services +</a> <ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </li> <li><a href="#">Products +</a> <ul> <li><a href="#">Widgets</a></li> <li> <a href="#">Sites +</a> <ul> <li><a href="#">Site 1</a></li> <li><a href="#">Site 2</a></li> </ul> </li> <li><a href="#">Gadgets +</a> <ul> <li><a href="#">Gadget 1</a></li> <li><a href="#">Gadget 2</a></li> </ul> </li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav> 

Answer 2

Just a slightly improved version of the great solution above.

 <style type="text/css"> #global-nav { width: 121px; float: left; background: #e8eef4; } #global-subnav { width: 121px; background: #09C; } #global-nav a { color: #034af3; cursor: pointer; display: block; height: 40px; line-height: 40px; text-indent: 10px; text-decoration:none; font-weight: bold; width: 100%; } #global-nav ul{ background: yellow; padding: 0; margin: 0; } #global-subnav ul{ background: orangered; position: relative; top: -10px; left: 40px; } #global-nav li{ list-style: none; border-bottom: #5C87B2 solid; border-width: 3px; } #global-nav ul ul li{ display:none; } #global-nav li:hover { background: #fff; } #global-nav li:hover ul li{ display:block; } </style> <div id="global-nav"> <ul> <li><a href="#One">One</a> <div id="global-subnav"> <ul> <li><a href="#A">A</a></li> <li><a href="#B">B</a></li> <li><a href="#C">C</a></li> </ul> </div> </li> <li><a href="#Two">Two</a> <div id="global-subnav"> <ul> <li><a href="#1">1</a></li> <li><a href="#2">2</a></li> <li><a href="#3">3</a></li> </ul> </div> </li> </ul> </div> 

Answer 3

In the last message, the code is incorrect.

You cannot have more than one ID with the same name in the document, so if you use the code above, you will need to change

ID="global-subnav" to class="global-subnav"

and then change the CSS from

#global-subnav to .global-subnav