Witam, dopiero uczę się robić strony i napotkałem na pewien problem, otóż po dodaniu przeźroczystości na diva moja rozwijana lista wygląda tak :
http://zapodaj.net/f09db975a74e2.png.html
Nie da się nawet najechać myszką na kategorie które są również przeźroczyste, ponieważ rozwijane menu wtedy znika (nie chcę żeby było przeźroczyste). Ma ktoś jakiś pomysł jak to rozwiązać?
0
0
Zapomniałeś dodać kod.
0
Kod html :
<body>
<div id="pojemnik">
<div id="logo">
</div>
<div id="menu">
<ol>
<li><a href="#">Gothic</a>
<ul>
<li><a href="#">Fabuła</a></li>
<li><a href="#">Mapa świata</a></li>
<li><a href="#">Postacie</a></li>
<li><a href="#">Śniący</a></li>
<li><a href="#">Kamienie ogniskujące</a></li>
<li><a href="#">Gildie</a></li>
</ul>
</li>
<li><a href="#">Gothic 2</a></li>
<li><a href="#">Gothic 3</a></li>
<li><a href="#">Mody</a></li>
<li><a href="#">Bezimienny</a></li>
</ol>
<div style="clear:both"></div>
</div>
<div id="topbar">
<div id="topbarL">
<img src="gothic1.png" />
</div>
<div id="topbarR">
<span class="bigtitle">Bezimienny :</span> "Powiedz no, czy to coś z przodu twojej głowy, czy to twarz czy dupa?"
</div>
<div style="clear:both;"></div>
</div>
kod css :
#topbar{
background-color: #303030;
color: white;
padding: 10px;
margin-top: 10px;
margin-bottom: 25px;
height: 170px;
opacity: 0.7;
ol{
padding:0;
margin: 0;
list-style-type:none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a{
color: #ffffff;
text-decoration: none;
display: block;
}
ol > li{
float: left;
width: 150px;
height: 40px;
border-right: 1px dashed black;
}
ol >li{
border-left: 1px dashed black;
text-align: center;
}
ol > li > ul{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol>li:hover > ul{
display: block;
}
ol > li > ul > li{
background-color: #545454;
position: relative;
border-top: 1px solid black;
}
ol > li > ul > li:hover{
background-color: black;
}
Nie wiem czy to wystarczy, pierwszy raz pytam na forum o pomoc i jestem trochę zagubiony :( W załączniku dałem cały plik html i css
2
Hmm, jest to bardzo "ciekawy" ficzer CSS. Szczerze to pierwszy raz się z tym spotykam, szerzej opisane jest to tutaj: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Rozwiązaniem będzie dodanie position: relative; z-index: 1; do ol.
0
dzek69 napisał(a):
szerzej opisane jest to tutaj: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Rozwiązaniem będzie dodanie
position: relative; z-index: 1;dool.
Dzięki mistrzu, działa !!