У меня есть несколько проблем, но главная проблема — мобильность с выпадающими меню. Я не могу понять, что я делаю неправильно.
Вот мой HTML:
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div><!--nav-header-->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">Practice <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</li>
<li><a href="Blog.html">Blog</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div><!--collapse-->
</div><!--container-->
</div><!--navbar-->
и вот мой CSS:
.navbar {
background: black;
position: absolute;
margin-top: 50px;
width: 100%;
border-top: 2px solid black;
border-bottom: 3px solid #4f3838;}
.navbar .nav-pills li {
font-size: 1.2em !important;}
.navbar .nav-pills a {
color: white;
margin: 0 3px 0 3px;}
.navbar .nav-pills a:hover {
color: black;}
.dropdown .dropdown-menu {
background: black;}
У меня две проблемы на мобильном телефоне: во-первых, после того, как я нажму, а затем уберу кнопку меню, она остается выбранной (после нажатия она становится серой, а не черной), а затем основное раскрывающееся меню отображается горизонтально, а раскрывающийся список в раскрывающемся списке отображается вертикально, создавая горячий беспорядок. Я не знаю, что я сделал, чтобы вызвать это или как это исправить. Когда я смотрю на учебники, примеры навигационных панелей в основном такие же, как у меня, и их раскрывающиеся списки ведут себя так, как ожидалось.
Моя последняя проблема заключается в том, что когда я выбираю раскрывающийся список «практика», у меня есть набор текста, который становится черным при наведении мыши, но поскольку это навигационная таблетка, фон становится белым, когда он выбран / открыт. Поэтому, если у вас открыто меню и вы отводите мышь, текст становится белым, а фон также белым. Есть ли решение CSS для этого?
Вы можете увидеть код в действии здесь: http://www.bootply.com/5q1qGfp2c3
Если вы перейдете к мобильному представлению и сожмете окно, вы увидите, что я имею в виду под выпадающим списком.
