Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
Андрей Бойченко
5 / 5 / 3
Регистрация: 23.06.2013
Сообщений: 174
1

Выпадающее горизонтальное css меню

23.09.2014, 21:44. Просмотров 535. Ответов 1
Метки нет (Все метки)

Здравствуйте! Есть необходимость сделать вертикальное выпадающее меню. Дочерние элементы должны появляться под родителем, а следующий родитель должен опускаться вниз. Но выходит так, что дочерний элемент появляется поверх следующего родителя! И еще добавлять в структуру меню ничего нельзя. Т.к этот html код генерируется автоматически, к нему можно только стиль применить(
Может не совсем доступно объяснил поэтому прилагаю код!)
Спасибо!
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
 
<ul id="menu-sidebar">
<li><a href="#"></a>
    <ul class="sub-menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#"></a></li>
<li><a href="#"></a>
    <ul class="sub-menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
</ul>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#menu-sidebar li{
display: block;
height: 100px;
border: 1px solid;
text-decoration: none;
}
#menu-sidebar li:hover .sub-menu{
display: block;
height: 100px;
border: 1px solid;
text-decoration: none;
}
 
.sub-menu{
display: none;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.09.2014, 21:44
Ответы с готовыми решениями:

горизонтальное выпадающее меню
Здравствуйте уважаемые форумчане! Сверстал резиновое горизонтальное...

Выпадающее горизонтальное меню
Код: .m1 { list-style-type:none; position:relative; float:left;...

Выпадающее горизонтальное меню
Помогите присоединить к этому меню выпадающие списки, пожалуйста. Нужно...

Горизонтальное выпадающее меню
Здравствуйте, подскажите как мне сделать, чтобы выпадающее меню отображалось...

выпадающее горизонтальное меню
как сделать выпдающее горизонтальное меню на основе таблицы , а не списка...

1
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
24.09.2014, 08:45 2
CSS
1
2
.sub-menu{position:absolute;top:100%}
#menu-sidebar > li{position:relative}
как нибудь так можно попробовать

плюс добавьте
CSS
1
2
3
4
5
6
7
.sub-menu{
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
будет гораздо красивее


ну и напоследок, в skype постучите если не получится сделать, логин superdiogen
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.09.2014, 08:45

Горизонтальное выпадающее меню
выпадающее меню пропадает при наведении курсора т.е когда просто заходишь на...

Выпадающее горизонтальное меню
Не могу заставить выпадать следующее меню: .mainMenu li:hover{...

Горизонтальное выпадающее меню
Помогите присоединить к этому меню выпадающие списки, пожалуйста. Нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru