View Full Version : css menu with drop down

08-03-2012, 04: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