Здравствуйте. Подскажите, как работает это меню, а именно, каким образом происходит появление подменю, при наведении на элемент меню. А то что-то не доходит. Моя ссылка html <html> <head> </head> <body style="background:#bbb;"> <div id="nav"> <ul class="select"> <li><a href="#"><b>1</b></a> <ul class="sub"> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> </ul> <ul class="current"> <!-- <<<== активное меню --> <li><a href="#"><b>4</b></a></li> </ul> <ul class="sub_active"> <!-- <<<== активное подменю меню --> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li class="current_sub"><a href="#">7</a></li> <!-- <<<== активная страница --> <li><a href="#">8</a></li> </ul> <ul class="select"> <li><a href="#"><b>9</b></a> <ul class="sub"> <li><a href="#">11</a></li> <li><a href="#">12</a></li> </ul> </li> </ul> </div> </body> </html> css ul#nav { list-style-type:none; /* Отмена маркеров списка */ margin:0; padding:0; } #nav { float:left; width:100%; height:75px; /* Высота всего меню (и верхнего уровня и нижнего, все вместе) */ position:relative; margin:0; /* Отступ сверху и снизу от меню */ } #nav .select, #nav .current { margin:0 10px; padding:0; list-style:none; display:block; } #nav li { display:inline; margin:0; padding:0; height:auto; } #nav .select a, #nav .current a { display:block; height:40px; /* Высота верхнего уровня */ float:left; padding:0 0 0 5px; text-decoration:none; font:normal 18px Tahoma; /* Размер шрифта верхнего уровня */ line-height:40px; white-space:nowrap; margin-right: 0; /* Отступы пунктов верхнего уровня */ position: relative; z-index: 500; } #nav .select a b, #nav .current a b { height:100%; display:block; padding:0 10px 0 5px; color:#ffffff; /* Цвет ссылок верхнего уровня */ } #nav .select a:hover, #nav .select li:hover a { cursor:pointer; } #nav .select a:hover b, #nav .select li:hover a b { color:#ffffff; } #nav .sub { display:none; } #nav .current a { background-image:url("images/left_nav.png"); background-repeat:no-repeat; background-position:0 -50px; border:none; } #nav .current a b { background-image:url('images/right_nav.png'); background-repeat:no-repeat; background-position:100% -50px; color:#ffffff; /* Цвет шрифта активного меню верхнего уровня */ } #nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover { color:#f6ff00; /* Цвет шрифта активного меню нижнего уровня */ text-decoration:underline; font:normal 14px Tahoma; } #nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active { display:block; position:absolute; width:100%; height: 40px; top:40px; left:0; background:#7a8897; /* Фон нижнего уровня */ padding:0 10px; z-index:100; } #nav .sub_active { z-index:10; } #nav .sub, #nav .sub_active { margin:0; padding:0 10px; list-style:none; } * html #nav .sub_active, * html #nav .select a:hover .sub { z-index:-1; margin-top:0; margin-top:1px; } #nav .sub_active a { height:25px; float:left; text-decoration:underline; line-height:24px; white-space:nowrap; font-weight:normal; font:normal 14px Tahoma; } #nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a { display:inline; background:none; padding:0 10px; margin:0; font:normal 14px Tahoma; /* Размер шрифта нижнего уровня */ width:auto; white-space:nowrap; font-weight:normal; border:0; color:#e1e8ef; /* Цвет шрифта нижнего уровня */ height:35px; line-height:35px; text-decoration:underline; }
