CSS Horizontal dropdown menu issues - css

Question

I am having a few issues with my css menu. I'm redesigning all my CSS menus and doing away with any javascript assistance. I'm sure it's something simple so please go easy on me.
First Issue: I am trying to connect a top border of an ul to the right border of an li.
I have tried adding a top-border to 'ul#nav ul' but it goes all the way across.
I have tried adding margin-bottom:-1px to 'ul#nav li:hover > a' to make it extend down to cover the top-border above but that doesn't work.
Second Issue: When the mouse is active in the slideout, I'm getting a weird space on the main li.
Final Issue: I've looked at several online tutorials to add a '>' graphic when there is a submenu but can't seem to get it integrated in the right places.
HERE IS LINK TO CODE: http://jsfiddle.net/Bqh9a/
Here is code:
<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;}
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>
<ul id="nav">
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
</ul>
Thanks so much for help in the right direction.

Answer 1

1st Issue:
One way to achieve this is to make the a links higher z-index (z-index:100 # Line 7), then give the ul menu a z-index of -1 and use 'top:23px' to pull the menu up underneath the .
But its a bit of a hack and if I were you I would avoid trying to do this
2nd Issue:
at line 7 of your CSS the :hover style is acting on all li's, even the ones that are nested, it would be much better for you to give the inner ul's their own classes, then you can apply more specific styles, at the moment the border-left is being applied to all li's that are beneath #nav
3rd Issue:
You can add another element () inside the li and float right, this could have a > image or just a > character.
I know you said you are removing javascript but it might be worth looking at jQuery UI Menu and looking at the CSS layout they use, (or just for pinching their icons)