Multi-level navigation and easy menu definition

[sciera]

@ mvlcek you are my hero!

I know that I'm strenuous but I cant fix this menu

1. how to stretch the black bars to the left
2. how to do that only one submenu will be highlighted

3 . the screens i made in Opera but in firefox and IE the menu is broken, how to fix it? (I would like to make it look like the picture)

see attached image

Code:

.sitemenu {
  position: relative;
  height: 1.4em;
  margin-top:0px;
  margin-left:-20px;
  margin-bottom:60px;
}
.sitemenu li ul {
  display:none;
  margin-left:8px;
}
.sitemenu li.currentpath > ul,
.sitemenu li.current > ul,
.sitemenu li:hover > ul {
  display:block;
}
.sitemenu ul {

  list-style: none;
}
.sitemenu li {
     margin: 12px 0 12px 0;
     border-top:1px solid rgba(255,255,255,.4);
     background: -moz-linear-gradient(top, #444 0%, #222 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444),     color-stop(100%,#222));
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
    }

.sitemenu li a {
  color: #ECECEC;
  text-decoration: none;  
  border-bottom: none;
  font-family: Impact, Charcoal, sans-serif;  
  line-height:1.2em;
  font-weight:100;
  text-transform:uppercase;
  
  padding: 3px 50px 3px 5px;

  background-color:#333;
  font-size:18px;
   letter-spacing:1px;

  background:#333;

  text-decoration:none;
  border-radius:4px 0 0 4px;
  -moz-border-radius:4px 0 0 4px;
  -khtml-border-radius:4px 0 0 4px;
  -webkit-border-radius:4px 0 0 4px;
  font-weight:100;
}
.sitemenu li:hover a{
    background:#6B94B4;
}