View Full Version : css menu with drop down

08-03-2012, 03:01 PM
Hi All,

I am trying to implement a css menu which has drop down menus coming form at least one of the main menu items.

here is my menu code

<ul class="userpanel">
<li class="panel_account"><a href="#">
<div class="panel_text">
<div class="welcome">Welcome <span class="user">Guest</span></div>
<div class="panel_heading arrow">Your Account</div>
<ul class="panel_account_drop">

<li class="panel_cart"><a href="#">
<div class="panel_text">
<div class="welcome">View</div>
<div class="panel_heading">Your Cart</div>

<li class="panel_list"><a href="#">
<div class="panel_text">
<div class="welcome">Your</div>
<div class="panel_heading">Favourites</div>

and my css

ul.userpanel{width:395px; height:40px;padding-bottom:5px; padding-top:5px;list-style:none;}
ul.userpanel li{padding:0; margin:0;list-style:none;}
ul.userpanel li ul{padding:0; margin:0; display:none;}
ul.userpanel li ul:hover{display:block;}
ul.userpanel li a{display:block; width:100%; height:100%; text-decoration:none; color:#000000;}
ul.userpanel li a:hover{color:#FFFFFF; background-color:#000000; width:100%; height:100%;}
.panel_text{width:85%; height:62%; padding:10px;}
.panel_account{width:145px; height:50px; float:left;border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; padding-right:2px;}
.panel_account_drop{width:200px; height:200px; border:1px solid #CCCCCC;}
.panel_cart{width:120px; height:50px; float:left; border-right:1px solid #CCCCCC; padding-right:2px;}
.panel_list{width:120px; height:50px; float:left; border-right:1px solid #CCCCCC; padding-right:2px;}
.welcome{font-size:12px; line-height:normal; font-family:Arial, Helvetica, sans-serif;}
.panel_heading{font-size:14px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.arrow{background-image:url(arrow-down.png); background-repeat:no-repeat; background-position:right;}

the problem is that the drop down does not show up when i hover over the "your account" tab can anyone see where i have gone wrong?

Also a quick question why does this

<a href="#"><div class="panel_text">.....</div></a>

produce different results than this

<a href="#" class="panel_text">.....</a>

thought it would produce the same results but strangely it does not.. can someone please help me to understand why?

Many Thanks

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum