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
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>
        </div></a>
        <ul class="panel_account_drop">
        	<li>test
            <li>
        </ul>
    </li>
    
    
    <li class="panel_cart"><a href="#">
    	<div class="panel_text">
            <div class="welcome">View</div>
            <div class="panel_heading">Your Cart</div>
        </div></a>
    </li>
    
    
    <li class="panel_list"><a href="#">
    	<div class="panel_text">
            <div class="welcome">Your</div>
            <div class="panel_heading">Favourites</div>
        </div></a>
    </li>
</ul>
and my css
Code:
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;}
.user{color:#CC9900;}
.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
Code:
<a href="#"><div class="panel_text">.....</div></a>
produce different results than this
Code:
<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
Luke