NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
petericek
Člen
Avatar
petericek:25.12.2016 20:24

Zdravím mám problém s vodorovným menu, vyskakovacie menu je zvisle, ja chcem, aby bolo takisto vodorovné a začínalo od prvej položky, googlil som, no neviem si pomocť, malo by to ísť cez **display: inline; ** no nejako mi to nefunguje, vďaka za pomoc

web:

<!DOCTYPE html>
<html>
<head>
<title>Menu vodorovné</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="nav">

<ul>
<li><a href="#">Domov</a></li>
<li><a href="#">Pre piatakov</a>

<ul>
<li><a href="#">Úlohy</a></li>
<li><a href="#">Písom­ky</a></li>
<li><a href="#">Testy</a></li>
<li><a href="#">Poznám­ky</a></li>
</ul>

</li>
<li><a href="#">Pre šiestakov</a>

<ul>
<li><a href="#">Úlohy</a></li>
<li><a href="#">Písom­ky</a></li>
<li><a href="#">Testy</a></li>
<li><a href="#">Poznám­ky</a></li>

</ul>

</li>
<li><a href="#">pre siedmakov</a>

<ul>
<li><a href="#">Úlohy</a></li>
<li><a href="#">Písom­ky</a></li>
<li><a href="#">Testy</a></li>
<li><a href="#">Poznám­ky</a></li>

</ul>

</li>
<li><a href="#">Iné veci</a></li>
</ul>

</div>

</body>
</html>

css:

body {
margin:0;
padding:0;
background:#ccc;
}
#nav {
float:left;
margin:50px;
}
#nav ul {
font:16px arial,tahoma,ver­dana;
list-style:none;
margin:0;
padding:0;
}
#nav ul li {
float:left;
position:relative;
display:block;
}
#nav ul li a {
color:#555;
background:#fff;
text-decoration:none;
margin:0 1px;
padding:15px 20px;
border-top:1px solid #555;
display:block;
}
#nav li ul {
display:none;
}
#nav ul li a:hover {
background:#066;
color:#fff;
}
#nav li:hover ul {
display:block;
position:relative;
}
#nav li:hover li {
float:none;
font-size:12px;
}
#nav li:hover a {
background:#333;
color:#fff;
}
#nav li:hover li a:hover {
background:#222;
}

 
Odpovědět
25.12.2016 20:24
Avatar
Aleš Lulák
Člen
Avatar
Aleš Lulák:2.1.2017 15:41

Taky zdravím,

no, asi by mělo stačit nastavit float: left pro #nav li:hover li

Nahoru Odpovědět
2.1.2017 15:41
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.