Easy CSS Vertical Menu

I have recently needed a quick and easy menu to implement having a vertical menu as drop down from one of the links in the menu. It was so easy that I decided to share for those those thought it was complicated like I did.


View Demo



<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<a href="#">Products</a>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a></li>
<a href="#">Services</a>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
<li><a href="#">Contact Us</a></li>



/* Menu */
ul.menu { background:#fefefe; border: 1px solid #eee; border-radius: 5px; height: 20px; padding: 10px; }
ul.menu, ul.menu li { list-style: none; padding-left: 5px; margin-bottom: 0 !important; }
ul.menu li{ float: left; padding-right: 20px; }
ul.menu li a {font-family: arial; color: #555;font-size: 14px;font-weight: normal; cursor: pointer; padding: 0 0 30px 0; }
ul.menu li a:hover {color: #000; text-decoration:none; }


/* Submenu */
.menu ul {position:absolute;left:-9999px;top:-9999px;list-style-type:none;z-index: 1000;}
.menu li:hover { position:relative; }
.menu li:hover ul{left:0px; top:25px; background:#fefefe; border: 1px solid #eee; border-radius: 5px;padding:0;}
.menu li:hover ul li a {padding:5px;display:block; width:80px; text-indent:15px;}
.menu li:hover ul li a:hover { color: #000; }

Thanks and enjoy 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s