Сделал выпадающее меню через списки HTML при наведении на пункт меню не выпадает
Код HTML:
<nav class="menu_hat">
<ul>
<li><a href="/new">Новости</a></li>
<li><a href="/menu/office">Офис</a>
<ul >
<li><a href="/firstsheet">О компании</a></li>
<li><a href="/catalog/school">Школа</a></li> <!-- Курсы это школа, будут какието семинары для повышения ( это наверно будет общая на всех или разные отделы группы школ по интересам) -->
<li><a href="/album">Фотокарточки</a></li>
<li><a href="/filebox">Амбар</a></li>
</ul>
</li>
<li><a href="/menu/product">Продукт</a>
<ul >
<li><a href="/store">Прайс</a></li>
<li><a href="/catalog/dragee">Драже и крем</a></li>
<li><a href="/catalog/cosmetic">Косметика</a></li>
<li><a href="/catalog/drinkmineral">Живые напитки</a></li>
</ul>
</li>
<li><a href="/menu/bortnik">Бортник</a>
<ul >
<li><a href="/event">Численник</a></li>
<li><a href="/catalog/apiary">Пасека</a></li>
<li><a href="/catalog/science">Оч'умелые ручки</a></li> <!-- игры для детей (лапта, банки склянки), наукова думка, наука из ничего, просто о сложном чему учили в школе физика математика химия-->
<li><a href="/catalog/song">Песни стихи</a></li>
</ul>
</li>
<li><a href="/menu/contact">Контакт</a>
<ul >
<li><a href="/location">Визитка</a></li>
<li><a href="/guestbook">Книга гостей</a></li>
</ul>
</li>
</ul>
</nav>
Код:
/* блок меню (возможно надо сделать через вложенность)*/
.menu_hat ul{
margin: 0px; /* обнуляем внешние поля */
padding: 0px; /* обнуляем внутренние отступы */
list-style: none; /* убираем маркеры списков */
}
.menu_hat, .menu_site, .sizon_button {/* */
width: 840px;
margin: 0 auto;
font: bold 13px/25px Tahoma, Arial, sans-serif; /* шрифт меню, жирный, без засечек ( sans-serif ) (размер px/отступ между строк px)*/
letter-spacing: 1px; /* отступ между буквами */
text-transform: uppercase; /* все буквы прописные */
}
.menu_hat ul li ul li{
float: none; /* отменяем обтикание для внутренних элементов списков, они распологаются в столбик*/
}
.menu_hat a {
display: block; /* делаем ссылки блоками */
white-space: nowrap; /* запрещаем перевод строк */
padding: 2px 35px; /* внутренние отступы (ширина по бокам) (ширина)*/
}
.menu_hat ul li{
display: block; /* делаем ссылки блоками */
position: relative; /* относительное позиционирование */
float: left; /* обтикание одного пункта относительно другова, пункты меню распологаются свлева направо, как и записаны в том порядке */
border-bottom: 2px solid transparent;
white-space: nowrap; /* запрещаем перевод строк */
/*padding: 0px 20px; внутренние отступы пунктов (высота) (ширина)*/
margin-right: 20px;
}
.menu_hat a{
color: #4f576d;
}
.menu_hat ul li ul {
display: none; /* скрываем внутренние списки */
}
.menu_hat ul li a:hover .menu_hat ul li ul, .menu_hat ul li.ie6 .menu_hat ul li ul {
display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
background: #4f576d; /* цвет фона */
margin-left: -30px; /* Сдвигаем подменю влево */
color: #ffa500; /* цвет текста внутренних ссылок */
position: relative; /* абсолютное позиционирование внутренних списков */
min-width: 140px; /* минимальная ширина подпунктов */
width: auto !important; /* для поддержки IE6 */
width: 140px; /* минимальная ширина подпунктов для IE6 */
overflow: hidden;
-webkit-box-shadow: 0 0 7px 0 #99958c; /* тень для разных браузеров */
-moz-box-shadow: 0 0 7px 0 #99958c; /* тень для разных браузеров */
box-shadow: 0 0 7px 0 #99958c; /* тень цвет кварцевый*/
}
.menu_hat li ul a:hover, .menu_hat li ul.ie6 a { /* полоска выделитель */
color: #4f576d; /* цвет текста внутренних ссылок при наведении курсора на них самих (#58eb51) зелёный цвет сочетается с чёрным*/
background: #ffa500; /* фон пунктов при наведеии*/
border-bottom: none; /* убираем подчёркивание у пунктов */
box-shadow: 0 0 5px 0 #ffbe47;
/* плавное угосание после отведения от пункта (быстро появляется плавно ичезает - надо сделать)*/
}
.menu_hat a:hover, .menu_hat.ie6 a {
color: #4f576d; /* цвет текста пунктов при наведении курсора */
border-bottom: none; /* убираем подчёркивание у подпунктов*/
}
Добавлено через 1 час 4 минуты
помогите пожалуйста