Good afternoon,
My current task is to create several stylesheets for a website. One of the websites styles requires me to create a drop-down menu, I however am not allowed to change the HTML code at all, so basically I'm asked to create a drop-down like menu with CSS only.
Here is the HTML code I have to display in form of 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>
There however are different requirements as well:
There shouldn't be any dots or circles preceding each list item.
I'm wondering whether it is possible to accomplish this task with CSS only or not.
Is there any way I can do this with CSS?
Best Answer
Vertical menu with horizontal expansion
jsBin demo
Vertical menu (mobile only)
this one might best suit for mobile (smaller screens CSS) otherwise the show/hide would troll with User Experience
jsBin demo