Witam,
Przerabiam gotowy szablon. Chciałem stworzyć menu rozwijane na elemencie 'Kategorie'. Podobnie jak na http://zapytaj.onet.pl. Tylko, że tam jest na kliknięcie a u mnie po najechaniu myszką. Problem jest taki, że elementy w pasku mają ustawiony padding w prawo na 15px. Przez co elementy w rozwiniętym menu dziedziczą to i są przesunięte. Usunąłem linijkę z paddingiem i wpisałem w każdej linii kodu osobno padding, aby nie było dziedziczenia. Wtedy rozwinięte menu na dole się wyrównało, ale górne rozjechało i nie mam pomysłu jak to wyrównać. Próbuję i wciąż bez skutku. Kod poniżej jest bez usuniecia tego paddingu. W miejscu .header-menu li, jest linijka z paddingiem, o który chodzi.
<style text="text/css">
#panel .upper {
background: #ffffff;
color: #fff;
padding: 7px;
height:30px;
clear: both;
box-shadow: 0 3px 10px #888888;
}
.header-menu li {
list-style: none;
float: left;
padding: 0 15px;
font-size: 15px;
color: #364041;
text-transform: uppercase;
transition: 0.5s;
}
.header-menu-level2 li {
float: none;
/*padding: 0px !important;*/
}
.header-menu a:link, .header-menu a:hover, .header-menu a:visited {
color: #E5E5E5;
}
.header-menu {
list-style: none;
float: left;
margin: 0;
padding: 0;
}
.header-menu {
list-style: none;
line-height: 44px;
margin-top: -7px;
}
.header-menu li:hover {
background: #006ad0;
color:#fff;
}
ul > li
{
list-style: none;
color: black;
}
ul > li {
float: left;
height: 45px;
text-align: center;
width: 100px;
}
ul > li > ol
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ul > li:hover > ol
{
display: block;
}
ul > li:hover > a {
color: pink;
}
ul > li > ol > li
{
background-color:#cf6969;
position: relative;
z-index: 100;
}
ul > li > ol > li:hover
{
background-color: #c34f4f;
}
ul > li > ol > li:hover > a
{
color: #451717;
}
</style>
</head>
<body>
<div id="panel">
<div class="upper">
<div class="wrapper">
<ul class="header-menu" style="float:left">
<a href="index.php"><li style=" background: #006ad0; color: #fff;"><i class="fa fa-home" aria-hidden="true"></i></li></a>
<a href="memberlist.php"><li><i class="fa fa-users" aria-hidden="true" ></i> Użytkownicy</li></a>
<a href="search.php"><li><i class="fa fa-search" aria-hidden="true" ></i> Szukaj</li></a>
<a href="#"><li><i class="fa fa-ban" aria-hidden="true" ></i> AmxBans</li></a>
<li><i class="fa fa-shopping-cart" aria-hidden="true" ></i> Kategorie</a>
<ol class="header-menu-level2">
<li><a href="#">Jeden</a></li>
<li><a href="#">dwa</a></li>
<li><a href="#">trzy</a></li>
<li><a href="#">cztery</a></li>
<li><a href="#">piec</a></li>
</ol>
</li>
<a href="#"><li><i class="fa fa-download" aria-hidden="true" ></i> Pobierz CS 1.6</li></a>
</ul>
</div>
</div>
