Witam. Sprawa jest taka że mam zrobioną stronę i trza mi zedytować menu, które nie działa. Problem jest w tym że podmenu 3 poziomu się nie chowa, jest zawsze wysunięte.
nav#hazzard ul.nav ul.dropdown-menu li ul.sub-menu li {
width: 100%;
text-align: left;
padding: 7px 10px;
}
nav#hazzard ul.nav ul.dropdown-menu li ul.sub-menu li:hover a {
text-decoration: none;
color: #B4CEE2;
}
nav#hazzard ul.nav>li>.dropdown-menu li ul li:hover {
background: transparent;
}
nav#hazzard ul.nav ul.dropdown-menu li.dropdown ul.sub-menu {
display: none;
}
nav#hazzard ul.nav ul.dropdown-menu li.dropdown:hover ul.sub-menu {
display: block;
}
<ul class="nav navbar-nav">
<li><a href="../latest-news.html" role="button" aria-expanded="false">Latest News</a></li>
<li><a href="../index.html" role="button" aria-expanded="false">Homepage</a></li>
<li class="dropdown">
<a href="../xxx.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Our Stories<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
<a href="../xxx.html" class="sub-menu">Subject 1<span class="glyphicon glyphicon-chevron-right"></span></a>
<ul class="sub-menu text-center">
<li><a href="../xxx.html">Overview</a></li>
<li><a href="../xxx.html">Story 1</a></li>
<li><a href="../xxx.html">Story 2</a></li>
<li><a href="../xxx.html">Story 3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="../xxx.html" class="sub-menu">Community give and get<span class="glyphicon glyphicon-chevron-right"></span></a>
<ul class="sub-menu text-center">
<li><a href="../xxx.html">XXX</a></li>
</ul>
</li>
Na wersji desktopowej działa elegancko. Problem jest z tabletem i mobilną
Cały kod:
http://output.jsbin.com/muqigukofo