Cześć,
koduję layout swojej strony, który zakłada stworzenie poziomego menu z poziomym submenu, jednak wysunięcie menu musi powodować przesunięcie obiektów znajdujących się poniżej. Nie chcę, by to menu zasłaniało slider czy też karuzelę cytatów.
Problem wydaje się błahy, ale nie mogę się z nim uporać. To już półmetek kodowania i na koniec właśnie zostawiłem sobie zmianę pozycji submenu z absolute na relative + poprawę cssa. Cóż, sama zmiana powoduje, że po wysunięciu submenu elementy głównego zmieniają pozycję w beznadziejny sposób. Cóż, position:relative mówi samo za siebie. Kombinowałem z pozycją absolutną dla main menu i relatywną dla sub-menu, ale nie przyniosło to także pozytywnych rezultatów. Pewnie po prostu za dużo kodu w głowie jak na jeden raz i nie mogę zrozumieć problemu. Liczę, że pomożecie mi w tym... I będę ogromnie wdzięczny za każdą pomoc.
HTML
<header>
<div class="pos-center">
<h1><a href="#">domek</a></h1>
<nav id="main-nav">
<div>
<ul class="menu">
<li class="current-menu-item">
<a href="#">Recenzje</a>
<ul class="sub-menu">
<li><a href="#" title="PC">PC</a></li>
<li><a href="#" title="PS3">PS3</a></li>
<li><a href="#" title="X360">X360</a></li>
<li><a href="#" title="PSV">PS Vita</a></li>
<li><a href="#" title="other">Inne</a></li>
<li><a href="#" title="all-rev">Wszystkie</a></li>
</ul>
</li>
<li>
<a href="#">Testy</a>
</li>
<li>
<a href="#">Newsy</a>
</li>
<li>
<a href="#">Zapowiedzi</a>
</li>
</ul>
<div class="wyszukiwarka">
<form action="">
<p><input type="text" onclick="this.value='';" onfocus="this.select()"
onblur="this.value=!this.value?'Czego szukasz?':this.value;"
value="Czego szukasz?" /></p></form>
</div>
</div>
</nav>
</div>
</header>
CSS
@charset "utf-8";
/* CSS Document */
body
{
background: #fafafa;
width: 50%;
margin: 0 auto;
}
body, input, textarea, select
{
font-family: "PT Narrow Regular1";
font-size: 14px;
color: #abc205;
}
.pos-center
{
margin: 0 auto;
}
/* style dla headera */
body > header
{
background: #f9f9f9;
height: 52px;
width: 958px;
border: 1px solid #e1e1e1;
}
body > header .pos-center
{
width: 960px;
}
body > header h1,
body > header nav
{
float: left;
}
body > header h1
{
margin-top: 21px;
}
body > h1 a
{
width: 399px;
height: 99px;
margin-top: 1em;
margin-bottom: 1em;
}
body > h1 a
{
text-indent: -999em;
background: url(../img/logo.png) no-repeat;
display: block;
}
body > header h1 a
{
text-indent: -999em;
background: url(../img/domek.png) no-repeat;
display: block;
margin-left: 20px;
margin-right: -14px;
margin-top: -5px;
}
body > header h1 a
{
width: 53px;
height: 52px;
}
/* main menu */
#main-nav
{
width: 960px;
position: absolute;
margin-left: 63px;
}
.wyszukiwarka
{
margin-top: 9px;
margin-left: 710px;
position: absolute;
}
.wyszukiwarka input
{
width: 160px;
height: 28px;
border: 1px solid lightgray;
color: #0e112a;
font-family: "PT Narrow Regular1";
padding-left: 10px;
background-color: #f1f1f1;
}
body > header nav ul.menu > li
{
float: left;
position: relative;
}
body > header nav ul li a
{
display: block;
font-family:"PT Narrow Regular1";
font-size: 12pt;
font-weight: normal;
text-transform: uppercase;
}
body > header nav ul.sub-menu li a
{
padding: 2px;
}
body > header nav ul.menu > li > a
{
padding: 17px 17px 0px;
height: 36px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
}
body > header nav ul.menu > li a:hover
{
background: #0e112a;
color: #f7f7f7;
}
ul.menu li:hover
{
background: #0e112a;
color: #f7f7f7;
}
body > header nav ul.sub-menu > li a:hover
{
background: none;
opacity: 0.8;
}
body > header nav ul li .sub-menu
{
background: #0e112a;
position: absolute;
margin-left: -64px;
width: 960px;
z-index: 10;
display: none;
color: white;
}
body > header nav ul li:hover .sub-menu
{
display: block;
padding: 10px 0px 8px;
}
body > header nav ul li .sub-menu li a
{
display: inline;
float: left;
padding-left: 20px;
padding-right: 20px;
background-position: 2px 6px;
height: 20px;
background-repeat: no-repeat;
margin-left: 10px;
}
body > header nav .sub-menu li.PC a
{
background-image: url(../img/myszka.png);
}
body > header nav .sub-menu li.X360 a
{
background-image: url(../img/padx360.png);
}
body > header nav .sub-menu li.PS3 a
{
background-image: url(../img/padps3.png);
}
body > header nav .sub-menu li.PSV a
{
background-image: url(../img/vita.png);
}
Jeśli chodzi o te li.PSV itp. to są to obrazki wywoływane dzięki skryptowi js - jakby ktoś nie wiedział po co te linie, chociaż na tym forum raczej nie muszę się o to martwić ;) - można je zignorować...
Cóż, mam nadzieję, że pomożecie mi z tym, bo w przeciwnym razie chyba zrobię pionowe sub-menu żeby mieć to z głowy...