Oto rozwijane menu:
<div id="top">
<ol class="a">
<li><div class="overlayTnav">
<a href="welcome-to-silent-hill">Strona Główna</a>
<a href="welcome-to-silent-hill"><span class="rrr"><p style="text-align:center; color:white;"><img src="img/home.png" width="20px;" height="20px;"/></p></span></a>
</div>
</li>
<li><div class="overlayTnav">
<a href="#">Silent Hill</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo1.jpg" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-1">Historia</a></li>
<li><a href="silent-hill-harry-mason">Postacie</a></li>
<li><a href="silent-hill-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-1">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">Silent Hill 2</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo2.jpg" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-2">Historia</a></li>
<li><a href="silent-hill-2-james-sunderland">Postacie</a></li>
<li><a href="silent-hill-2-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-2-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-2-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-2-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-2-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-2">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">Silent Hill 3</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo3.png" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-3">Historia</a></li>
<li><a href="silent-hill-3-heather-morris">Postacie</a></li>
<li><a href="silent-hill-3-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-3-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-3-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-3-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-3-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-3">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">SH 4: The Room</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo4.png" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-4-the-room">Historia</a></li>
<li><a href="silent-hill-4-the-room-henry-townshend">Postacie</a></li>
<li><a href="silent-hill-4-the-room-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-4-the-room-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-4-the-room-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-4-the-room-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-4-the-room-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-4-the-room">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">SH: Origins</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo5.png" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-origins">Historia</a></li>
<li><a href="silent-hill-origins-travis-grady">Postacie</a></li>
<li><a href="silent-hill-origins-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-origins-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-origins-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-origins-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-origins-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-origins">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">SH: Homecoming</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo6.jpg" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-homecoming">Historia</a></li>
<li><a href="silent-hill-homecoming-alex-shepherd">Postacie</a></li>
<li><a href="silent-hill-homecoming-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-homecoming-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-homecoming-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-homecoming-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-homecoming-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-homecoming">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">Shattered Memories</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo7.jpg" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-shattered-memories">Historia</a></li>
<li><a href="silent-hill-shattered-memories-harry-mason">Postacie</a></li>
<li><a href="silent-hill-shattered-memories-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-shattered-memories-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-shattered-memories-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-shattered-memories-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-shattered-memories-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-shattered-memories">Solucja</a></li>
</ul></li>
<li><div class="overlayTnav">
<a href="#">SH: Downpour</a>
<a href="#"><span class="rrr" style="background-color:black;"><p style="text-align:center; color:white;"><img src="img/logo8.jpg" width="80px;" height="20px;"/></p></span></a>
</div>
<ul class="a1">
<li><a href="welcome-to-silent-hill-downpour">Historia</a></li>
<li><a href="silent-hill-downpour-murphy-pendleton">Postacie</a></li>
<li><a href="silent-hill-downpour-weapons-bronie">Bronie</a></li>
<li><a href="silent-hill-downpour-potwory-bossowie">Potwory</a></li>
<li><a href="silent-hill-downpour-zakonczenia-endings">Zakończenia</a></li>
<li><a href="silent-hill-downpour-soundtracks">Soundtracks</a></li>
<li><a href="silent-hill-downpour-galeria-screeny">Galeria</a></li>
<li><a href="solucja-silent-hill-downpour">Solucja</a></li>
</ul></li>
</ol>
</div>
Oto kod css rozwijanego menu:
ol.a
{
padding:0;
margin:0;
list-style-type:none;
font-size:11px;
height:40px;
line-height:350%;
display:inline-block;
}
ol.a a
{
color:white;
text-decoration:none;
display:block;
}
ol.a > li
{
position:relative;
float:left;
width:107px;
border-right:2px solid red;
height:40px;
}
ol.a >li:first-child
{
border-left:2px solid red;
}
ol.a > li:hover
{
background-color:black;
}
.overlayTnav
{
width:107px;
height:40px;
}
.overlayTnav .rrr
{
line-height:300%;
position:absolute;
display:block;
width:107px;
height:40px;
background-color:#27a38d;
left:0;
top:0;
opacity:0;
transition: opacity 0.3s ease-in-out;
}
.overlayTnav:hover .rrr
{
opacity:1.0;
}
ol.a > li:hover > a
{
color:red;
}
ol.a > li > ul.a1
{
padding:0;
margin:0;
list-style-type:none;
display:none;
}
ol.a > li:hover >ul.a1
{
display:block;
}
ol.a > li > ul.a1 > li
{
background-color:#696969;
color:white;
border-top:2px solid black;
height:40px;
z-index: 99999;
position: relative;
}
ol.a > li > ul.a1 > li:hover
{
background-color:black;
}
ol.a > li > ul.a1 > li:hover > a
{
color:red;
}
oto graficznie: Mam sobie menu:
Najezdzam kursowem na SH: Origins
Rozwija mi się pionowe menu..a napis SH: Origins zmienia się na obrazek z logiem jak poniżej na zdjęciu:
Natomiast kiedy zjezdzam kursorem na poniżesze opcje z rozwijanego menu np. Postacie to logo ponownie zmienia mi się ponownie na napis SH: Origins. jak poniżej:
a Chciałbym, żeby pozostawione było logo. Co musiałbym zmienić w kodzie... Z góry dzięki
