Witam
chciałbym prosić o wyjaśnienie jednej małej korekty błędu. Otóż przy menu rozwijanym, po najechaniu lista wyświetla się zbyt wysoko, najeżdża na górne opcje, proszę o pomoc i wyjaśnienie co było źle.
Ogółem jeśli macie jeszcze jakieś sugestie chętnie je przyjmę.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<title>AlphaRank</title>
<meta name="description" content="Strona poświęcona podzespołom komputerowym. Spis parametrów, modeli, cen oraz ranking wydajności/opłacalności danego sprzętu."/>
<meta name="keywords" content=""/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<a href="index.html">
<img width="80" height="80" src="logo.png"/>
</a>
</div>
<div id="nav">
<ol>
<li>
Spis podzespołów
<ul>
<li><a href="x">Proceosry</a></li>
<li><a href="x">Karty graficzne</a></li>
<li><a href="x">Płyty główne</a></li>
<li><a href="x">Pamięć operacyjna</a></li>
<li><a href="x">Zasilacze</a></li>
</ul>
</li>
<li>
Peryferia
<ul>
<li><a href="x">Monitory</a></li>
<li><a href="x">Myszyki</a></li>
<li><a href="x">Klawiatury</a></li>
<li><a href="x">Słuchawki</a></li>
<li><a href="x">Mikrofony</a></li>
<li><a href="x">Nagłośnienie</a></li>
</ul>
</li>
<li>
Dodatki
<ul>
<li><a href="x">Obudowy</a></li>
<li><a href="x">Dyski SSD</a></li>
<li><a href="x">Dyski HDD</a></li>
<li><a href="x">Ledy</a></li>
</ul>
</li>
</ol>
</div>
</div>
<div>
</body>
</html>
body
{
background-image: url(backgrounds/b1.png);
/* Background pattern from Subtle Patterns */
color: black;
margin:0;
}
#container
{
width:100%;
height:100%;
margin-left: auto;
margin-right:auto;
}
#header
{
height:148px;
width:100%;
background-color: white;
border-bottom:2px dotted white;
}
#logo
{
height:80px;
width:80px;
padding: 10px;
}
#nav
{
width:100%;
text-align:center;
height:48px;
}
ol
{
margin:0;
padding:0;
display: inline-block;
font-size: 18px;
}
ol a
{
color: black;
text-decoration: none;
display: block;
}
ol > li
{
list-style-type: none;
float:left;
height:33px;
width:200px;
padding-top: 15px;
border-right: 1px dashed gold;
}
ol > li:first-child
{
border-left: 1px dashed gold;
}
ol > li:hover
{
background-color: white;
}
ol > li > ul
{
display: none;
padding:0;
margin:0;
height:40px;
}
ol > li > ul > li
{
list-style-type: none;
position: relative;
z-index: 100;
background-color: white;
border:1px dashed gold;
height: 30px;
padding-top:15px;
}
ol > li:hover > ul
{
display:block;
}