+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: menu i baner (/thread-menu-i-baner)
menu i baner - rivulus - 05-06-2010
Witam!
Mam menu poziome z listy i css, które po najechaniu myszką rozwija się. Pod menu znajduje się baner. Gdy menu rozwija się, baner zjeżdża w dół. Będę wdzięczny za podpowiedź, jak sprawić, żeby przy rozwijaniu menu baner pozostał w tej samej pierowtnej pozycji, a rozwinięte menu znajdowało się na banerze.
Może nie do końca jasno to opisałem, więc podam przykład:
menu jak na stronie wyborcza.pl, które po rowinięciu nachodzi na element poniżej.
Z góry dziękuję za pomoc i pozdrawiam.
RE: menu i baner - KeeL - 05-06-2010
Podaj proszę kod.
RE: menu i baner - rivulus - 05-06-2010
<div>
<ul id="menu">
<li><a href="#">LINK A</a>
<ul>
<li><a href="#">LINK A1</a></li>
</ul>
</li>
<li><a href="#">LINK B</a>
<ul>
<li><a href="#">LINK B1</a></li>
<li><a href="#">LINK B2</a></li>
</ul>
</li>
<li><a href="#">LINK C</a>
<ul>
<li><a href="#">LINK C1</a></li>
<li><a href="#">LINK C2</a></li>
<li><a href="#">LINK C3</a></li>
<li><a href="#">LINK C4</a></li>
<li><a href="#">LINK C5</a></li>
<li><a href="#">LINK C6</a></li>
<li><a href="#">LINK C7</a></li>
</ul>
</li>
<li><a href="#">LINK D</a>
<ul>
<li><a href="#">LINK D1</a></li>
<li><a href="#">LINK D2</a></li>
<li><a href="#">LINK D3</a></li>
<li><a href="#">LINK D4</a></li>
</ul>
</li>
<li><a href="#">LINK E</a>
<ul>
<li><a href="#">LINK E1</a></li>
<li><a href="#">LINK E2</a></li>
<li><a href="#">LINK E3</a></li>
</ul>
</li>
</ul>
<img src="baner.jpg" alt="reklama">
</div>
i kod CSS:
#menu {
line-height: 30px;
width: 770px;
margin: 0;
padding: 0;
}
#menu li {
float: left;
list-style-type: none;
}
#menu li a {
display: block;
width: 154px;
text-align: center;
background: red;
color: white;
padding-top: 1px;
padding-bottom: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#menu li a:hover {
background: blue;
color: white;
text-decoration: none;
}
#menu li li {
float: none;
}
#menu li ul {
height: 0px;
overflow:hidden;
margin: 0;
padding: 0;
}
#menu li:hover ul {
height: auto;
}
RE: menu i baner - dziamber - 05-06-2010
dodaj z-index: 200 do któregoś diva, zobacz na którym to będzie działało