Large results in CSS Menu leading to distortion - html

Question

This is the CSS Used. What im doing is giving hover to the main UL and then Hiding the Li,
and some coloring for beautifying purpose
.preload1 {background: url(/ncbeonline/image/dbintranet/untitled.gif);}
.preload2 {background: url(/ncbeonline/image/dbintranet/images.gif);}
.preload3 {background: url(/ncbeonline/image/dbintranet/gear_icon.gif);}
#nav {padding: 0; margin:0; list-style:none; height:0px; width:31px; background:black; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; }
#nav li a.top_link {display:block; height:14px; line-height:15px;
width:11px; color:black; text-decoration:none; font-size:9px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
#nav li a.top_link span {display:block; padding: 0; height:14px;width:31px; color:#CFDAEB;}
#nav li a.top_link span.down { display:block; padding: 0; height:14px; width:31px;color:#CFDAEB;}
#nav li a.top_link:hover {color:black; color: #CFDAEB;}
#nav li a.top_link:hover span {color:#CFDAEB;}
#nav li a.top_link:hover span.down {color:#CFDAEB;}
#nav li:hover > a.top_link {color:black; color: #CFDAEB;}
#nav li:hover > a.top_link span {color:#CFDAEB;}
#nav li:hover > a.top_link span.down {color:#CFDAEB;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{right:0; top:16px; background: yellow; padding:3px; border:1px solid #5a5aff; white-space:nowrap; width:200px; height:auto; z-index:300;}
#nav li:hover ul.sub li
/** big box*/
{display:block; height:20px; position:relative; float:right; width:200px; font-weight:normal;}
#nav li:hover ul.sub li a
/* for bg color*/
{display:block; font-size:14px; height:20px; width:200px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:yellow;}
#nav li:hover ul.sub li a:hover
{background:#5a5aff; color:yellow;}
#nav li:hover ul.sub li a.fly:hover
{background:#5a5aff; color:yellow;}
#nav li:hover ul li:hover > a.fly {background:#5a5aff; color:yellow;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{right:90px; top:-4px; background: yellow; padding:3px; border:1px solid #5a5aff; white-space:nowrap; width:90px; z-index:400; height:auto;}
HTML part for generating the Menus. This is a simple menu with 4 options with a onclick event attached for navigation purpose
<ul id="nav">
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">
<img src="/ncbeonline/image/dbintranet/gear_icon.gif"
width="20px" height="20px" align="right" /></span></a>
<ul class="sub">
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=
$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail
/historyList.xhtml');
document.getElementById('PRODUCT').submit();">-View Product
</a></li>
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail /edit.xhtml');
document.getElementById('PRODUCT').submit();">-Edit Product </a></li>
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/copy.xhtml');
document.getElementById('PRODUCT').submit();">-Copy Product </a></li>
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/addNewChildParent.xhtml');
document.getElementById('PRODUCT').submit();">-Add Child Product </a></li>
<s:if test='%{approvalStatus neq "A"}'>
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/deleteView.xhtml');
document.getElementById('PRODUCT').submit();">-Delete Draft </a></li>
</s:if>
<s:elseif test='%{approvalStatus eq "A"}'>
<li><a onclick="pageSubmit(${referenceId});
$('PRODUCT').action=$('PRODUCT').action.gsub('ProductList/list.xhtml','ProductListDetail/deleteView.xhtml');
document.getElementById('PRODUCT').submit();">-Delete Product </a></li>
</s:elseif>
</ul>
</li>
</ul>