I have created a navigation at the top of my website using CSS and unordered lists <ul>.

When I hover over the parent <ul><li> the sub-menu is displayed just fine. I am then able to mouseover the first <li> in my sub-menu, but when I go past that first <li> the sub-menu disappears. I am baffled, but I assume it is something to do with margin or padding values and I'm just to sick of staring at the screen to figure it out.

Below is my CSS and XHTML snippets.

CSS
-------------------------------------
Code:
#h_top_right {
	width: 825px;
	height: 49px;
	position: relative;
	clear: both;
	z-index: 1; }
	
#h_bot_right {
	width: 825px;
	height: 49px;
	position: relative;
	clear: both;
	z-index: 1; }
	
#h_top_right a:link { color: #000000; text-decoration: none; }
#h_top_right a:visited { color: #000000; text-decoration: none; }
#h_top_right a:hover { color: #000000; text-decoration: none; }
#h_top_right a:active { color: #000000; text-decoration: none; }
	
	
/* NAVIGATION LAYOUT SETTINGS */
#h_top_right ul {
	list-style: none;
	padding: 18px 0px 18px 0px;
	margin: 0;
	position: relative;
	float: right;
	z-index: 2; }
	
#h_top_right ul li {
	padding: 0px 15px 0px 15px;
	margin: 0;
	position: relative;
	float: right;
	z-index: 2; }
	
#h_top_right ul li ul {
	list-style: none;
	display: none; }
	
#h_top_right ul li:hover ul {
	padding: 5px 0px 0px 0px;
	margin: 0px 0px 0px -15px;
	position: absolute;
	display: block;
	z-index: 2; }
		
#h_top_right ul li:hover ul li {
	width: 150px;
	padding: 5px 15px 5px 15px;
	margin: 0;
	position: relative;
	float: left;
	clear: both;
	z-index: 2; }
	
#h_top_right ul li:hover ul li:hover a:hover { color: #000000; text-decoration: underline; }


XHTML
-------------------------------------
Code:
        <div id="h_top_right">
          <ul>
            <li><a href="">About</a> <img src="<?php echo SITE_URL; ?>images/DownArrow.png" />
              <ul>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
              </ul>
            </li>
            <li><a href="">Baby Names</a></li>
            <li><a href="">Baby Showers</a></li>
            <li><a href="">Baby Pools</a></li>
            <li><a href="">Login</a> <img src="<?php echo SITE_URL; ?>images/DownArrow.png" />
              <ul>
                <li><a href="">Login</a></li>
                <li><a href="">Register</a></li>
              </ul>
            </li>
          </ul>
        </div>

Any help in identifying the source of the problem will be greatly appreciated.

Thanks!