0

Как в этом меню можно добавить пункты?

Например, чтобы открывались 3, 4 пункт при наведении мыши. Какие свойства нужно прописать в CSS и куда добавить пункты.

<ul>
    <li class='active'><a href='index.html'><span>Квартиры</span></a></li>
    <li><a href='#'><span>Новостройки</span></a></li>
    <li><a href='#'><span>Нежилые помещения</span></a></li>
    <li class='last'><a href='#'><span>Дома и коттеджи</span></a></li>
</ul>
1

1 ответ 1

2

В интернете поэтому вопросу материалов огромное количество. Например: http://jsfiddle.net/XGzmh/

/*Обнуляем отступы*/
ul, li {
    margin:0;
    padding:0;
    list-style-type:none;   
}
 
/*Задаём параметры блока, содержащего основное меню*/
#menu {
    display:block;
    position:absolute;
    top:100px;
    left:50px;         
}
 
/*Задаём стили для разделов нашего меню*/
#menu > li {
    display:inline-block;
    height:20px;
    position:relative;
}
 
/*Стили для скрытого выпадающего меню*/
#menu > li > ul {
    position:absolute;
    top:20px;
    display:none;   
}
 
/*Делаем скрытую часть видимой*/
#menu > li:hover > ul {
    display:block;  
}
 <ul id="menu">
    <li><a href="#">Раздел1</a></li>
    <li><a href="#">Раздел2</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
        </ul>
    </li>
    <li><a href="#">Разде3</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
            <li><a href="#">Подраздел4</a></li>
            <li><a href="#">Подраздел5</a></li>
            <li><a href="#">Подраздел6</a></li>
            <li><a href="#">Подраздел7</a></li>
        </ul>
    </li>       
</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.