inteaktywne menu

pytanie zadane 14 stycznia 2017 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)
zamknięte 14 stycznia 2017 przez Alex.Ironside

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

komentarz zamknięcia: xmentor rozwiązał problem

Pokaż 9 poprzednich komentarzy

komentarz 14 stycznia 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

No to działa do połowy teraz, bo skacze. Ale przy hover ma się rozwinąć. Czegoś nie rozumiem. Możesz wyjsćnić co tam robię źle?

komentarz 14 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

Co Ci skacze? display nie jest animowalne jeśli o to chodzi.

komentarz 14 stycznia 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

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;
        }

To jest w oryginale tak. więc jest na none

1	komentarz 14 stycznia 2017 przez xmentor Nałogowiec (49,520 p.) w media queries dla max-width: 767px; masz ustawione: 501 linjka - ;-; jak chcesz zrobić jakaś animacje rozwijania to właściwość visibility + inne