Horizontální víceúrovňové menu

/* 
    Document   : style
    Created on : 29.12.2012, 17:25:19
    Author     : victor
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
*{
    margin:0px;
    padding:0px;
}
#nav{
    width:960px;
    height:50px;
    float:left;
}
ul li{
    display:inline;
    list-style-type:none;
    float:left;
    width:120px;/*nastavíme stejnou šířku jako má ul li a, menu bude na svém místě a 
    pokud zadáme větší šířku submenu, bude i tak vše na svém místě*/
}
ul li a{
    float:left;
    background-color:black;
    color:white;
    font-family:"Helvetica", "Arial", sans-serif;
    font-size:16px;
    text-decoration: none;
    text-transform: uppercase;
    width:120px;
    height:40px;
    line-height:40px;
    text-align:center;
}
ul li a:hover{
    color:white;
    background-color:darkgray;
}
ul li .submenu{
    float:left;
    display:none;
    width:250px; /*šířka submenu - nesmíme zapomenout nastavit šířku ul li, aby nám neodskakovalo hlavní menu*/
    font-family:"Helvetica", "Arial",sans-serif;
    font-size:14px;
    text-align:left;
}
.submenu ul.submenu_left{
    float:left;
    height:auto;
    width:100px; /*musíme zadat stejnou šířku jako u .submenu_left li a*/
    text-align:left;
}
.submenu_left li, .submenu_right li{
    background-color: darkgray;
    text-transform: uppercase;
    font-weight:bold;
    text-align:center;
}
.submenu_letter{
    padding-top:20px;
}
.submenu ul.submenu_left li a{
    text-decoration:underline;
    background-color: darkgray;
    color:white;
    font-size:13px;
    float:left;
    padding-left:10px;
    text-align:center;
}
.submenu ul.submenu_left li a:hover,.submenu ul.submenu_right li a:hover{
    color:papayawhip;
    font-weight:bold;
}
.submenu ul.submenu_right{
    float:left;
    height:auto;
    width:100px; 
    text-align:left;
}
.submenu ul.submenu_right li a{
    text-decoration:underline;
    color:white;
    background-color: darkgray;
    font-size:13px;
    float:right;
    padding-right:10px;
    text-align:center;
}
ul li:hover .submenu{
    display:block;
    clear:both;
}
.submenu:hover ul li a:hover{
    background-color:darkgray;
}