Выпадающее меню CSS

79
11

Я застрял в выпадающем меню. Проблема в том, что "родительская" ссылка прыгает.

HTML:

<ul id="nav">
<li><span>Page 1</span>
<ul>
<li><a>Extralong Page 1.1</a></li>
<li><a>Page 1.2</a></li>
<li><a>Page 1.3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><span>Page 3</span>
<ul>
<li><a>Page 3.1</a></li>
<li><a>Long description for page 3.2</a></li>
<li><a>Page 3.3</a></li>
<li><a>Page 3.4</a></li>
</ul>
</li>
</ul>

CSS:

* {
margin: 0;
padding: 0;
}

#nav {
float: right;
}

#nav ul {
float: left;
}

#nav li {
float: left;
padding-top: 2px;
list-style: none;
background: #3451ff;
}

#nav li a,
#nav li span {
display: block;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
padding: 13px 10px 9px 10px;
}

#nav li a:link, #nav li a:active, #nav li a:visited,
#nav li span {
color: #FFF;
}

#nav li a:hover, #nav li a.active,
#nav li span:hover {
color: #000;
}

#nav li li {
display: none;
}

#nav li:hover li {
display: block;
float: none;
background: #555;
}

#nav li li a {
font-size: 10pt;
margin: 1px;
width: 100%;
background: #3c6f3a;
padding: 5px 0;
}

демонстрация

Как я могу сделать этот родительский статический, чтобы его ширина не изменялась при наведении? Я не хочу использовать js.

спросил(а) 2021-01-19T11:25:22+03:00 6 месяцев, 2 недели назад
1
Решение
78

Задайте ширину для родителя:

#nav li {
float: left;
padding-top: 2px;
list-style: none;
width: 100px; /* Add this bad boy */
background: #3451ff;
}

ДЕМО ЗДЕСЬ

ответил(а) 2021-01-19T11:25:22+03:00 6 месяцев, 2 недели назад
64

Вы можете использовать position:absolute и сделать свою родительскую position:relative li position:relative Demo


#nav ul {
position:absolute;
right:0;
}

ответил(а) 2021-01-19T11:25:22+03:00 6 месяцев, 2 недели назад
45

Использовать позицию: относительный для родительского элемента ul и указать позицию: абсолютный для родительского ребенка.. он будет работать нормально.

Вот обновленная скрипка: http://jsfiddle.net/nikhilvkd/gmU55/5/

#nav li li {
display: none;
position:relative;
}

#nav li:hover li {
display: block;
float: none;
position:absolute;
background: #555;
}

ответил(а) 2021-01-19T11:25:22+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема