display:block problem (CSS)

[donatello]

I am building a flyover menu for a WordPress theme and have three problems with the CSS that mostly works! I'm very pleased I got this to work in WordPress and these minor things are driving me mad now... :confused:

You can skip the images and see a working model here:
http://www.skoolz.org/test2/testcss.html


1.) The display:block seems to overflow.
http://www.skoolz.org/test2/images/test.jpg (image)


2.) My <li> alignment is now off since I got the flyover working.
(same pic)

3.) The border lines no longer show up in FF.


I have removed this page from its home and put it here in HTML (only flyover works, links, etc. are dead)

http://www.skoolz.org/test2/testcss.html

The CSS for the flyover is:

/*TEST AREA BEGIN*/
#sidebar ul,#sidebar ul li,#sidebar ul ul {
width: 170px; /* Menu Width */
margin: 0;
list-style: none;
}

#sidebar ul li { float: left; position: relative; width: 100%; margin-bottom: 6px; }
#sidebar ul li.iehover { z-index: 1000; /* IE z-index bugfix */ }

#sidebar ul li ul li { float: left; position: relative; width: 100%; }
#sidebar ul li ul li.iehover { z-index: 1000; /* IE z-index bugfix */ }

#sidebar ul li ul li ul li { float: left; position: relative; width: 100%; }
#sidebar ul li ul li ul li.iehover { z-index: 1000; /* IE z-index bugfix */ }

#sidebar ul li ul li ul{
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}

#sidebar ul a{
display: block;
overflow:hidden;
}

/* Root Menu Hover Persistence */
#sidebar ul a:hover,ul#navmenu-v li:hover a,ul#navmenu-v li.iehover a {
background: #f5f5f5;
color: #00f;
}

/* 2nd Menu */
#sidebar ul li:hover li a,#sidebar ul li.iehover li a {
float: none;
}

/* 2nd Menu Hover Persistence */
#sidebar ul li:hover li a:hover,#sidebar ul li:hover li:hover a,#sidebar ul li.iehover li a:hover,#sidebar ul li.iehover li.iehover a {
background: #fefefe; width:100%;
}

/* 3rd Menu */
#sidebar ul li:hover li:hover li a,ul#navmenu-v li.iehover li.iehover li a {
background: #f5f5f5;
}

/* 3rd Menu Hover Persistence */
#sidebar ul li:hover li:hover li a:hover,ul#navmenu-v li:hover li:hover li:hover a,ul#navmenu-v li.iehover li.iehover li a:hover,ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #fefefe;
}

/* Hover Function - Do Not Move */
#sidebar ul li:hover ul ul,#sidebar ul li:hover ul ul ul,#sidebar ul li.iehover ul ul,#sidebar ul li.iehover ul ul ul { display: none; }
#sidebar ul li:hover ul,#sidebar ul ul li:hover ul,#sidebar ul ul ul li:hover ul,#sidebar ul li.iehover ul,#sidebar ul ul li.iehover ul,#sidebar ul ul ul li.iehover ul { display: block; }
/*TEST AREA END*/



There is a bit of Javascript to hack IE. :)


<!--Fix for the sidebar Flyover menu to work in IE - BEGIN-->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);
});
</script>
<!--Fix for the Flyover menu to work in IE - END-->