CSS: Sexy Vertical Popup Menu with CSS ~ Web Speaks

CSS plays a major role in lives of all web developers. But very few of them reveal the real power of CSS. This tutorial helps you identifying the real power of CSS. Here I hace developed a stylish vertical popup menu with CSS and withou help of any JavaScript. The menu works superbly on all well known web browsers including the bad guy Internet Explorer. Have a look on how it works. Don't hesitate in writing me your queries.

Live Demo Download Script

CSS Code

*{margin:0;padding:0;}

#leftPan {
 WIDTH: 240px; FLOAT: left;
}
#leftPan UL {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 240px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 231px; PADDING-TOP: 28px;
}
#leftPan UL LI {
 POSITION: relative; MARGIN: 0px auto; WIDTH: 118px;  HEIGHT: 27px;
}
#leftPan UL LI A {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 22px; WIDTH: 96px; PADDING-RIGHT: 0px; DISPLAY: block; FONT: bold 13px/26px "Trebuchet MS", Arial, Helvetica, sans-serif; BACKGROUND: #f6f4e4; HEIGHT: 26px; COLOR: #8f8c73; TEXT-DECORATION: none; PADDING-TOP: 0px;
}
#leftPan UL LI A:hover {
 BACKGROUND:#f6f4e4; COLOR: #7f0a5f; TEXT-DECORATION: none;
}

/* Begin CSS Menus at Left */
#menuleft{position:absolute;z-index:2;}
#menuleft li{margin:0;padding:0;list-style-type:none;}
#menuleft li a{display:block;}
#menuleft ul{list-style-image:none;}

#menuleft ul li ul{list-style-image:none; left:50px; top:0px; padding:10px; padding-top:0px;}
#menuleft ul li ul li a{margin:0px; width:150px; border:1px solid #ff3399; border-right:5px solid #ff3399; border-left:0px;}
#menuleft ul li ul li a:hover{background-image:none;}

#menuleft ul ul{list-style-image:none;}
#menuleft ul ul ul{list-style-image:none;}

/* Begin CSS Popout Menus at Left */
#menuleft ul li{position:relative;}
#menuleft li ul{position:absolute;top:0;display:none;}

/* Fix IE. Hide from IE Mac \*/
* html #menuleft ul li{float:left;height:1%;}
* html #menuleft ul li a{height:1%;}
/* End */

div#menuleft ul li:hover ul{display:block;}
div#menuleft ul li:hover ul ul {display:none;}
div#menuleft ul li:hover ul ul ul {display:none;}

div#menuleft ul ul {display:none;}
div#menuleft ul ul ul {display:none;}

div#menuleft ul ul li:hover ul{display:block;}
div#menuleft ul ul ul li:hover ul{display:block;}

/* End CSS Popout Menus at Left */
/* End CSS Menus at Left */

CSS Code

<body>
<DIV id=leftPan>
 <UL>
   <div id="menuleft">
   <ul>
    <li><a href="http://www.seoconsultants.com/">Jquery</a>
     <ul>
      <li><a href="http://www.webspeaks.in/2010/05/jquerydelete-rows-with-animation-effect.html">Animate</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/update-facebook-status-with-php-most.html">Facebook Status</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/identify-keycodes-with-jquery.html">KeyCodes</a></li>
      <li><a href="http://localhost/consult/srchbycat.php">Jobs by Category</a></li>
     </ul>
    </li>
    <li><a href="#">PHP</a>
     <ul>
      <li><a href="http://www.webspeaks.in/search/label/php">Search</a></li>
     </ul>
    </li>
    <li><a href="#">Facebook</a>
     <ul>
      <li><a href="http://www.webspeaks.in/2010/05/facebooktwitter-like-load-more-results.html">Load More</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/facebook-like-expanding-textbox-with.html">Expanding Textbox</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/facebook-style-toggle-comment-box.html">Toggle Comment</a></li>
     </ul>
    </li>
    <li><a href="#">Twitter</a>
     <ul>
      <li><a href="http://www.webspeaks.in/2010/05/twitter-style-flash-message-with-jquery.html">Flash Message</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/update-twitter-status-with-php-most.html">Update status</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/twitter-like-login-box-with-jquery-css.html">Login Box</a></li>
      <li><a href="http://www.webspeaks.in/2010/05/update-twitter-status-with-php-most.html">Update status</a></li>
     </ul>
    </li>
    <li><a href="#">CSS</a>
     <ul>
      <li><a href="http://www.webspeaks.in/2010/05/sexy-drop-down-menu-with-css.html">Drop Down</a></li>
     </ul>
    </li>
   </ul>
   </div>
 </UL>
 
</DIV>

</body>

3 comments

bdnt

June 12, 2010 at 10:26 AM

nice work done!
javascript sucks somehow!!!!

Anonymous

June 14, 2010 at 10:34 AM

I luv CSS

Trade show pop-up

June 19, 2011 at 11:39 AM

Don't be afraid to ask for references. Companies who have solid relationships with happy customers will be glad to give you a list of references. Once you have the list, follow through on contacting them. Ask questions about the quality of the products they purchased and whether they were satisfied with the service they received. Also be sure to ask what kind of flooring they bought - if you're considering industrial rubber flooring, you'll want to talk to at least two customers who are using rubber flooring.

We would love to hear from you...