css выпадающее меню сила сверху не под

49
5

У меня есть код CSS для выпадающего меню. Я создаю 3 меню с тем же CSS, где каждый отображается под другим. Html создается из Perl-скрипта, поскольку данные создаются для каждого поиска.

#menu {
padding:0;
margin:0;
}

ul#menu {
list-style: none;
top: 1.1em;
position: relative;
background: #171e35;
padding: 1em 1em;
margin-bottom: 10px;
}

ul#menu ul {
display: none;
position: absolute;
top: 34px;
left: -30px;
width: 250px;
text-align: left;
*width: 100%; /* IE7 hack*/
}

ul#menu li:hover ul {
display: block;
}

ul#menu li {
position: relative;
display: inline;
}

ul#menu li a {
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

.submenu li a {
display:block;
}

#menu ul li a {
background: #171e35;
left;
}

<ul id="menu">
<li><a href="#">Menu</a>
<ul class="submenu">
<li><a href="$site_url>Home</a></li>
<li><a href="index.cgi>See ALL</a></li>
<li><a href="index.cgi>Quick Availability</a></li>
</ul>
</li>
</ul>

<!-- And the second menu code: -->

<ul id="menu">
<li><a href="#">Choose</a>
<ul class="submenu">
<li><a href="$site_url>Blah</a></li>
<li><a href="index.cgi>Blah2</a></li>
<li><a href="index.cgi>Blah3</a></li>
</ul>
</li>
</ul>

<!-- And third is same -->

ПРОБЛЕМА: верхнее/первое меню опускается ниже следующего меню, чтобы его нельзя было прочитать. Есть ли код, который заставит активный снижать вверх?

спросил(а) 2015-12-28T21:26:00+03:00 4 года, 2 месяца назад
1
Решение
50

Как насчет добавления свойства z-index в ваше ul#menu li:hover ul и добавление к нему некоторого значения:

#menu {
padding: 0;
margin: 0;
}

ul#menu {
list-style: none;
top: 1.1em;
position: relative;
background: #171e35;
padding: 1em 1em;
margin-bottom: 10px;
}

ul#menu ul {
display: none;
position: absolute;
top: 34px;
left: -30px;
width: 250px;
text-align: left;
*width: 100%;
/* IE7 hack*/
}

ul#menu li:hover ul {
display: block;
z-index: 100;
}

ul#menu li {
position: relative;
display: inline;
}

ul#menu li a {
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

.submenu li a {
display: block;
}

#menu ul li a {
background: #171e35;
left;
}

<ul id="menu">
<li><a href="#">Menu</a>
<ul class="submenu">
<li><a href="$site_url">Home</a></li>
<li><a href="index.cgi>See ALL</a></li>
<li><a href=" index.cgi>Quick Availability</a>
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><a href="#">Choose</a>
<ul class="submenu">
<li><a href="$site_url>Blah</a></li>
<li><a href=" index.cgi>Blah2</a>
</li>
<li>
<a href="index.cgi">Blah3</a></li>
</ul>
</li>
</ul>

ответил(а) 2015-12-28T22:43:00+03:00 4 года, 2 месяца назад
51

Прежде всего, вы должны исправить html-теги. Все ваши теги не имеют тега конца.

<ul id="menu">
<li><a href="#">Menu</a>
<ul class="submenu">
<li><a href="$site_url>Home</a></li>
<li><a href="index.cgi>See ALL</a></li>
<li><a href="index.cgi>Quick Availability</a></li>
</ul>
</li>


Должен стать

<ul id="menu">
<li><a href="#">Menu</a>
<ul class="submenu">
<li><a href="$site_url">Home</a></li>
<li><a href="index.cgi">See ALL</a></li>
<li><a href="index.cgi">Quick Availability</a></li>
</ul>
</li>

ответил(а) 2015-12-28T22:58:00+03:00 4 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

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