Drop-down menu float: right – CSS – Fórum – Programujte.com

Mám víceúrovňové menu, ale když mu dám float:right přestanou fungovat víceúrovňové tlačítka, menu se sice zobrazí, ale když na něj najedu myší ztratí se!

CSS 

.nav{
	font-family: 'PT Sans', sans-serif;
	
	box-shadow: 		0 1px 6px rgba(0,0,0,0.3);
	-moz-box-shadow:    0 1px 6px rgba(0,0,0,0.3);
  	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  	text-transform: uppercase;
  	background-color: white;
	
	
	width: 100%;
	height:70px;
	padding: 0;
	line-height: 70px;
	vertical-align: middle;
}

.nav  ul {
	float: right;;
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
	
}

.nav > ul > li {
	
	width: 120px;
	border-bottom: none;
	height: inherit;
	font-size: 1.4em;
	
	display: inline-block;
		
  
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;

}

.nav a {
	
	text-decoration: none;
	color: black;
	display: block;
	transition: .3s background-color;
}

.nav > ul > li:hover {
	float:none;
	clear:both;
	background-color: #005f5f;
	border-bottom: 5px solid #ff0000;
}


.nav  > ul > li > ul{
	
	display: none;
	position: absolute;
	width: 100px;
} 

.nav  > ul > li:hover > ul{
	display: block;
} 

HTML

<nav class="nav">
	<ul>
		
		<li  class="<?php if($currentURL==="$root/test.php") 	echo "header-active"?>"><a href=<?php echo "$root/Index.php";?>>ÚVOD</a></li>
		<li  class="<?php if($currentURL==="$root/test.php") 	echo "header-active"?>">
			<a href=<?php echo "$root/Index.php";?>>kurzy</a>
			<ul>
	        	<li ><a href="#">test</a></li>
	        	<li ><a href="#">test</a></li>
	        	<li ><a href="#">test</a></li>
			</ul>	
		</li>
		<li  class="<?php if($currentURL==="$root/test.php") 	echo "header-active"?>"><a href=<?php echo "$root/Index.php";?>>ÚVOD</a></li>
		<li  class="<?php if($currentURL==="$root/test.php") 	echo "header-active"?>"><a href=<?php echo "$root/Index.php";?>>ÚVOD</a></li>
		<li  class="<?php if($currentURL==="$root/test.php") 	echo "header-active"?>"><a href=<?php echo "$root/Index.php";?>>ÚVOD</a></li>
	</ul>
	
</nav>

1. Php tu nema, co delat. Sposta lidi ti nemuze poradit, protoze nezna php a cely html kod se jim rozhodi. Proste se to neda ted testovat.
www prohlizec ma funkci zobrazit zdrojovy kod, stacilo to jen z tama zkopirovat a mel bys to bez php.

2. ul / li jsou inline prvky, pripadne inline-block. Kdyz jim nastavis float, tak obklopuji text. Krasne to muzes videt, kdyz si tam pridas
.nav ul, .nav li {border:1px solid #f00; background:#eee;}
Je tam tedy urcita oblast kolem textu, kde to aktivni je a kde uz ne. Aspon ve FF se mi menu zhasne jen kdyz z te oblasti vyjedu.

3. neresis vubec situaci, ze se menu zalomi pres 2 radky. To podbarveni s tim rameckem se totiz neroztahne, takze to vypada divne, treba na jsfiddle.
http://jsfiddle.net/f61gu8x8/

4. nenapsal jsi, jaky pouzivas web prohlizec. To muze byt dost zasadni, protoze kazdy se chova jinak. Nejlogicteji se, podle mne, chova firefox. Chrome ma problemy, opera ma problemy, explorer ma specialni chovani a starsi verze dost problemu, ostatni prohlizece maji omezene zobrazovani. Problemy myslim to, zee napises logicky kod, spravne, a on jej neumi zobrazit bez nejakych dalsich uprav a nebo se ti proste html nejak rozsype, nekdy zobrazi, nekdy ne. Proste se neda spolehat na to, ze se to zobrazi v poradku, pokud nejsi zkusenejsi a nevis, co kde mas navic dopsat, aby to nenadelao zas potize v ostatnich prohlizecich.

Jeste ti muzu dat link na jakysi editor menu. Ale je to pro starsi prohlizece kolem roku 2005. Kdo vi, jak se zachovaji moderni. A taky mi tam schazi obrazky (jenom skin folder a folder2 tam jakesi ma). Proto jsou tam takove prazdne mista.
http://peter-mlich.wz.cz/…menuedul.htm
Funguje to tak, ze
- skin + sipka nahoru prenasi vybrane menu do zobrazeni
- data to kopiruji do editace vzhledu
- naskinuj z editace to opet prenese nahoru do menu
- dole pak tlacitka
css - generuje css k html kodu,
www - generuje uplne novou html stranku (www prohlizec, zobrazit zdrojovy kod a mas cele menu),
skin - zobrazi zdrojovy kod pro skiny, kdyby sis program ulozil a editoval