Rozwijane menu

Witajcie!

Niestety nigdy to nie było moją mocną stroną więc przyszedłem z moim problemem tutaj.

Jak zrobić rozwijane menu?

Kod HTML

<nav class="navbar">
                <ul class="menu">
                    <li><a href="#">Regulamin</a></li>
                    <li class="hoverli"><a href="#">Drop Menu</a>
                        <ul class="submenu">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php">Użytkownicy</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Pomoc</a></li>
                </ul>
            </nav>

Kod CSS:

.navbar ul {
	display: block;
	padding-left: 0px;
	margin-top: 30px;
}

.navbar ul li {
	display: inline;
	padding:0px;
	;
}

.navbar ul li a:link,
.navbar ul li a:visited {
	color: #323A45;
	padding: 31px 10px;
	-moz-transition: 0.2s ease-in;
	-webkit-transition: 0.2s ease-in;
	-o-transition: 0.2s ease-in;
	transition: 0.2s ease-in;
}

.navbar ul li a:hover,
.navbar ul li a:active {
	background-color: #DDDFE3;
	-moz-transition: 0.2s ease-in;
	-webkit-transition: 0.2s ease-in;
	-o-transition: 0.2s ease-in;
	transition: 0.2s ease-in;	
	text-decoration: none;
}

submenu nie ma nadanych stylów jeszcze

Na przyszłość polecam kod wrzucać  na jakieś jsfiddle, czy codepen Szybciej wtedy ktoś tam coś dopisze i odeśle.

Aktualnie jestem w pracy, ale na szybko znalazłem kilka interesujących linków:
 

- http://codepen.io/keukenrolletje/pen/ILvze
- http://designscrazed.net/css3-jquery-dropdown-menus/
- http://www.freshdesignweb.com/css-drop-down-navigation-menu.html

No nie całkiem rozwiązany.

Poradziłem sobie, ale gdy dodamy drugie drop menu dzieje się tak -> http://jsfiddle.net/Gx4A7/

Teraz mam problem z marginesem. Po nadaniu ; dla .submenu nic nie załatwia, ponieważ drugi odnośnik jest szerszy i efekt psuje się -> http://jsfiddle.net/Gx4A7/4/ <- odświeżona wersja

Po co Ci margines:

margin-top:49px;

Skoro masz absolutnie podane submenu więc możesz uzyć:

top:49px;

Zmniejsz do 20px.

No i brakuje CI:

position:relative;

dla LI na który najeżdzasz.

Nie czaje do konca o co Ci chodzi, ale może pomogłem: http://jsfiddle.net/Gx4A7/7/

Aj karramba!

Działa, ale div nadrzędny ma u mnie overflow:hidden

-> http://jsfiddle.net/7gDnj/

Proponuje rozszerzyć ten box z rezultatem. Gdy #topbar nie ma overflow:hidden, to kolejny większy box, który jest pod nim wchodzi obok menu i wszystko psuje.

Użytkownik wolfdz edytował ten post 31 lipca 2014 - 19:06

Nie czaje. Przeciez menu działa jak należy.

Wyjaśnij mi co to jest:

box z rezultatem

oraz :

kolejny większy box

Nie trzeba dawać żadnych overflow: hidden... Powiedz jasniej co chcesz osiągnąć, bo na razie to nie mogę Ciebie zrozumieć. Chcesz menu ale sam stwarzasz sobie problemy

To jest pod mybb więc zmienne są w tym kodzie i nie chciało mi się ich zmieniać na coś innego:

http://jsfiddle.net/q6rTh/

Tak wygląda cały header i overflow:hidden musi być, chyba, że znasz/znacie inny sposób aby tak samo wyglądało

Użytkownik wolfdz edytował ten post 31 lipca 2014 - 20:49

Div z clear:both pomógł, jednak nie rozumiem trochę działania tego. Dlaczego zawszę ten div musi być pod elementem gdzie są floaty?

Sorki, że akurat tutaj, ale jak Google widzi rozwijane menu ?

Sorki, że akurat tutaj, ale jak Google widzi rozwijane menu ?

Tak. Gogle analizuje kod. A rozwijane menu to zwykła lista.

Dzięki za odpowiedź