у меня есть вопрос о моем выпадающем меню, он не будет падать, и я искал здесь в stackoverflow (что очень помогло мне с другими вещами), но я не могу найти проблему, которая у меня есть
это мой html-код: ps я использую в html-коде
<ul>
<li><a href="radio.html">Radio</a></li>
<ul>
<li><a href="web.html">Webradio</a></li>
<li><a href="win.html">Winacties</a></li>
</ul>
<li><a href="playlist.html">Playlists</a></li>
<ul>
<li><a href="vandaag.html">Playslist van vandaag</a></li>
<li><a href="win.html">Playlist van de week</a></li>
</ul>
<li><a href="nummer.html">Welk nummer was dat?</a></li>
<ul>
<li><a href="welke.html">Nummers van vandaag</a></li>
</ul>
<li><a href="over.html">Over ons</a></li>
<ul>
<li><a href="wie.html">Wie zijn wij</a></li>
</ul>
</ul>
и это мой код css:
nav ul ul{ display: none; }
nav ul li:hover> ul {display: block; }
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table; }
nav ul:after {content: ""; clear: both; display: block; }
nav ul li {float: left; }
nav ul li:hover {background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); }
nav ul li:hover a {color: #fff; }
nav ul li a {display: block; padding: 25px 40px;
color: #757575; text-decoration: none; }
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%; }
nav ul ul li {float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative; }
nav ul ul li a {padding: 15px 40px;
color: #fff; }
nav ul ul li a:hover{background: #4b545f; }
nav ul ul ul { position: absolute; left: 100%; top:0; }
так что случилось с моим кодом? мне нужно что-то изменить? мой код просто неправильный? что это???
пожалуйста, помогите мне, потому что я действительно нуждаюсь в этом, это действительно помогло бы, если бы вы, ребята, помогли мне :)
Проблема в вашем html:
<li><a href="radio.html">Radio</a></li>
<ul>
<li><a href="web.html">Webradio</a></li>
<li><a href="win.html">Winacties</a></li>
</ul>
Должно быть:
<li><a href="radio.html">Radio</a>
<ul>
<li><a href="web.html">Webradio</a></li>
<li><a href="win.html">Winacties</a></li>
</ul>
</li>
Обратите внимание, как первый li
закрыт на последней строке?
Затем вы можете отобразить подменю с помощью:
li:hover ul {display: block;}
Вы закрываете родительские теги li
для элементов меню верхнего уровня, прежде чем включать подменю ul
, измените свой HTML таким образом:
<nav>
<ul>
<li><a href="radio.html">Radio</a>
<--! closing li should NOT be here -->
<ul>
<li><a href="web.html">Webradio</a>
</li>
<li><a href="win.html">Winacties</a>
</li>
</ul>
</li> <--! closing li should be here -->
<li><a href="playlist.html">Playlists</a>
<ul>
<li><a href="vandaag.html">Playslist van vandaag</a>
</li>
<li><a href="win.html">Playlist van de week</a>
</li>
</ul>
</li>
<li><a href="nummer.html">Welk nummer was dat?</a>
<ul>
<li><a href="welke.html">Nummers van vandaag</a>
</li>
</ul>
</li>
<li><a href="over.html">Over ons</a>
<ul>
<li><a href="wie.html">Wie zijn wij</a>
</li>
</ul>
</li>
</ul>
</nav>
Поскольку у вас это есть, вы используете недопустимый HTML, ничто не должно появляться за пределами li
файлов внутри ul
.
<nav>
... я не вижу там навигацию ...