Исчезающее меню на хтмл

@Freeman228 · Регистрация: 14.05.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте подскажите как сделать чтобы при наведении на пункт из меню рядом всплывало его подменю?

@borovik · 14.05.2012, 21:30

мб html?

HTML5

<ul id="nav">
    <li>
        <a href="#" title="Вернуться на главную страницу">Главная</a>
    </li>
    
    <li>
        <a href="#" title="Информация о компании">О нас</a>
        <ul>
            <li><a href="#">Продукты</a></li>
            <li><a href="#">Команда</a></li>
        </ul>
    </li>
    
    <li>
        <a href="#" title="Что мы можем для вас сделать">Услуги</a>
        <ul>
            <li><a href="#">Услуга один</a></li>
            <li><a href="#">Услуга два</a></li>
            <li><a href="#">Услуга три</a></li>
            <li><a href="#">Услуга четыре</a></li>
        </ul>
    </li>
    
    <li>
        <a href="#" title="Наша продуктовая линейка">Продукты</a>
        <ul>
            <li><a href="#">Маленький продукт (первый)</a></li>
            <li><a href="#">Маленький продукт (четвертый)</a></li>
            <li><a href="#">Большой продукт (пятый)</a></li>
            <li><a href="#">Невообразимый продукт (девятый)</a></li>
 
        </ul>
    </li>
    
    <li>
        <a href="#" title="Как с нами связаться">Контакт</a>
        <ul>
            <li><a href="#">Часы работы</a></li>
            <li><a href="#">Местоположение</a></li>
        </ul>
    </li>
</ul>

CSS

#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    display: none;
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    display: inline; /* Приносим его обратно на экран, когда нужно */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background: #6b0c36;
}

http://jsfiddle.net/mLDKe/

@Freeman228 0 / 0 / 0 Регистрация: 14.05.2012 Сообщений: 4
		1
	Исчезающее меню на хтмл 14.05.2012, 20:07. Показов 2197. Ответов 1 Метки нет (Все метки) Здравствуйте подскажите как сделать чтобы при наведении на пункт из меню рядом всплывало его подменю? 0

	14.05.2012, 21:30