css - Problems with UL in absolute or float, links not clickable -

I have a javascript menu that I have produced using nested UL elements when I have either nested UL or relative position To set up the float, or to have a full position with a float, links in the elements of Nested UL can be found in some way. Some of them will be clickable, but not all.

Here are some sample codes:

  & lt; Ul class = "top" & gt; & Lt; Li class = "before" & gt; & Lt; A href = "somewhere" class = "first link" & gt; Link & lt; / A & gt; & Lt; Ul class = "nested" id = "menu_about" & gt; & Lt; Li class = "second" & gt; & Lt; A href = "somewhere" square = "secondlink" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "second" & gt; & Lt; A href = "somewhere" square = "secondlink" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "second" & gt; & Lt; A href = "somewhere" square = "secondlink" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "second" & gt; & Lt; A href = "somewhere" square = "secondlink" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   
 css  
  #main_nav ul.top {list-style: none; Padding: 0; Margin: 0; Top: 5px; Status: Relative; } #main_nav ul.top li.first {margin-bottom: .5em; Padding: 0 pixels; Text align: right; Status: Relative; } #main_nav ul.top li.first a.firstlink, #main_nav ul.top li.first a.firstlinkactive {display: block; Width: 100%; Line-height: 25px; Background-image: url (/images/gray_back.png); Padding-right: 10px; Width: 140px; } #main_nav ul.top li.first a.firstlink: hover, #main_nav ul.top li.first a.firstlinkactive: hover {background-image: url (/images/red_back.png); } #main_nav ul.top li.first ul {left: 150px; Align text: left; Background-image: url (/images/red_back.png); Status: Completed; List style: none; Margin: 0; Padding: 5px 10px; Top: 0; Overflow: Auto; } #main_nav ul.top li.first ul.nested_hidden {visibility: hiding; } #main_nav ul, #main_nav ul li, #main_nav ul li ul, #main_nav ul li, #main_nav ul li ul li {status: relative; Z-index: 1000; }   
 If I reverse the situation. Set up: Relative relation works in relation to the link, but it spoils first-level elements and spreads them to fill space. Some kind of installation status: Absolute nested ul is causing problems with its inside link. If I determine the position, then I can also get the same behavior: relative and set float: left  
 Float and full position causes and HTML structure, or CSS code.  
 Thank you very much  
 
 I have learned one thing while using the lists, Any style other than  float: left  on LI (and the clearing list type margin and padding), ever use  display: block  on a tag and only one anchor Use the style.  
 Once you are not careful then start separating the combination of Li and A things.  
 The basic pattern is:  
  ul, li {padding: 0; Margin: 0; List-style-typwe: none} ul {status: relative; } Ul ul {status: absolute; Top: ___; Left:___; } Li A {display: block; ... your other styling ...}