выпадающее меню таблицей

/*пишем  стиль для главного списка, и всех списков внутри него(т.е. пишем те правила, которые относятся ко всем спискам)*/
#nav, #nav ul{
    list-style:none;/*убираем маркеры списка*/
    margin:0px;
    padding:0px;
    background-color:#4d4d4d;/*задаем фоновый цвет*/
    font:11px/28px Verdana, Arial, Helvetica, sans-serif;/*Указываем размер шрифта/высоту строки и семейство шрифта. Высота строки нужна для автоматического выравнивания текста по высоте*/
}
 
/*стиль только для главного списка*/
#nav{
    height:28px;/*обязательно жестко задавать высоту, чтобы список не схлопывался,и была возможность задавать фоновый цвет*/
    width:996px;/*ширина меню. Можно не указывать, тогда меню растянется на всю ширину родительского элемента*/    
    position:relative;
    top:10px;
    left:2px;
}
 
/*стиль для пунктов списка*/
#nav li{
    float:left;/*делаем элементы списка плавающими(включаем обтекание) вследствие чего, они выстраиваются в один ряд*/
    position:relative;/*задаем относительное позиционирование. Теперь, вложенные элементы будут позиционироваться не относительно окна браузера, а относительно элементов списка.*/
}
 
/*стили для пунктов списка при наведении на них */
 
 
 
 
 
/*стиль для ссылок встречающихся внутри главного списка*/
#nav a{
    display:block;/*делаем ссылку блоком (по умолчанию, ссылка это элемент строчный) */
    width:80px;/*ширина блока ссылки*/
    color:#fff;/*цвет текста ссылки*/
    margin-left:20px;
    margin-right:20px;
    padding:0; /*поля внутри блока ссылки*/
    text-align:center;/*выравнивание текста по центру*/
    text-decoration:none;/*убираем подчеркивание*/
}
 
/*стиль для ссылок при наведении*/
#nav a:hover{
    background-color:#4d4c4c;/*цвет фона*/
    color:#fff;/*цвет текста */
}
 
/*стиль касающийся вложенного списка*/
#nav ul{
    margin:0;
    border:0;/*обнуляем рамку снизу(она будет задана для ссылки)*/
    visibility:hidden;/*прячем список*/
    width:0px;/*ширина вложенного списка. Задается обязательно, т.е. иначе в I.E. 6 список будет располагаться горизонтально. 118 - потому,что даем по 1пикселу слева и справа на рамку*/
    position:absolute;/*абсолютное позиционирование. В данном случае, вложенный список будет позиционироваться относительно родителя(Елемента списка li , для которого мы задавали position:relative)*/
    top:28px;/*координата по вертикали(отступ сверху)  равен высоте нашего главного списка*/
    left:0;/*координата по горизонтали(отступ слева)*/
}
 
/*стиль для ссылок внутри вложенного списка */
#nav ul a{
        background-color:#333;
border:0; /*обнуляем рамку, унаследованную от стиля #nav a */
border-bottom:1px solid #cccccc; /*теперь задаем рамку снизу, чтобы она разделяла ссылки*/
width:138px;/*задаем ширину блоков ссылки, ставим 78, а не 80, т.к. по 1 пикселю с каждой стороны будет рамка списка*/
}
 
/*стиль для вложенного списка, в момент наведения на пункт главного списка*/
#nav li:hover ul, #nav li.jshover ul{visibility:visible;} /*показывам список*/