| Muamicus |
22.12.2010 18:13 |
ul ul_hover überdecken
Hallo,
die gehoverten ul`s sollen die Bilder rechts überecken.
Gibt es dafür eine Möglichkeit? oder müsste ich die Hierarchie im html ändern?
Link
HTML
PHP-Code:
<div id="wrapper">
<div id="cont_wrap">
<div id="head"></div>
<div id="navi">
<ul id="cssMenu">
<li><a href="#"><strong>Startseite</strong></a></li>
<li><a href="#"><strong>Landwirtschaft</strong></a></li>
<li><a href="#">- Angebote aus Landwirtschaft</a></li>
<li><a href="#"><strong>Forst</strong></a></li>
<li><a href="#">- Was bietet der Wald</a></li>
<li><a href="#"><strong>Gartenbau</strong></a></li>
<li><a href="#"><span>- Stauden</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="underclass" style="width:178px;">
<li><a href="#">Staudenliste</a></li>
<li><a href="#">Gräser</a></li>
<li><a href="#">Farne</a></li>
<li><a href="#">Kräuter/Tee/Gewürze</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">- Dachstauden</a></li>
<li><a href="#"><span>- Sumpf- und Wasserpflanzen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="underclass" style="width:166px;">
<li><a href="#"><strong>Wasserpflanzenliste</strong></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span><strong>Seerosen</strong></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="underclass" style="width:126px;">
<li><a href="#">Seerosenliste</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><strong>Repositionspflanzen</strong></a></li>
<li><a href="#"><strong>Nachwachsende Rohstoffe</strong></a></li>
<li><a href="#"><strong>Zubehör</strong></a></li>
<li><a href="#"><strong>Veranstaltungen</strong></a></li>
<li><a href="#"><strong>Praktika / Job</strong></a></li>
<li><a href="#"><strong>Kauf / Verkauf / Pacht</strong></a></li>
<li><a href="#"><strong>Kontakt</strong></a></li>
<li><a href="#"><strong>Anfahrt</strong></a></li>
<li><a href="#"><strong>Gästebuch</strong></a></li>
<li><a href="#"><strong>Partnerlinks</strong></a></li>
<li><a href="#"><strong>Impressum</strong></a></li>
</ul>
</div>
<div>
<h1>Startseite - Land - Forst - Gartenbau - Laubusch</h1>
<p>Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br />
Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br />
</p>
<div id="rahmen">
<a class="start" href="#">
<img id="aktprojekt" onmouseover="new Effect.Opacity( 'aktprojekt', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'aktprojekt', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Aktuelle PORSCHE Restaurationen" hspace="4" width="172" border="0" src="./1.jpg" />
</a>
<a class="start" href="#">
<img id="beratung" onmouseover="new Effect.Opacity( 'beratung', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'beratung', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Qualifizierte Beratung rund um Kauf, Restauration, Wartung und Pflege" hspace="4" width="172" border="0" src="./2.jpg" />
</a>
<a class="start" href="#">
<img id="reparatur" onmouseover="new Effect.Opacity( 'reparatur', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'reparatur', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Fachgerechte Reparatur, Wartung und Pflege Ihres Porsche Klassikers" hspace="4" width="172" border="0" src="./3.jpg" />
</a>
<a class="start" href="#">
<img id="strahl" onmouseover="new Effect.Opacity( 'strahl', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'strahl', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Strahlarbeiten jeglicher Art zum Beispiel Sandstrahlen, Glasperlenstrahlen, Kunststoffstrahlen, Nussschalenstrahlen" hspace="4" width="172" border="0" src="./4.jpg" />
</a>
</div>
</div>
</div>
</div>
<div id="bot_nav">
<ul id="ul1">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
CSS
PHP-Code:
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#e7ddba url("img/stripes_top.jpg") repeat-x 0px 0px;
font-family:Arial;
font-size:100%;
text-align:center;
}
#wrapper {
position:relativ;
min-height:100%;
background:url("img/stripes_bot.jpg") repeat-x left bottom;
}
#head {
background-image:url(img/head.jpg);
background-repeat:no-repeat;
width:1000px;
height:177px;
margin:0 auto;
}
/*NAVIGATION*/
#navi {
float:left;
margin-top:80px;
text-align:left;
width:206px;
height:540px;
}
ul#cssMenu ul{display:none}
ul#cssMenu li:hover>*{display:block}
ul#cssMenu li:hover{position:relative;}
ul#cssMenu ul{
position: absolute;left:98%;top:-1px;}
ul#cssMenu ul ul{
position: absolute;left:98%;top:-2px;}
ul#cssMenu,ul#cssMenu ul{
margin:0px;list-style:none;padding:1px 1px 0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#999999;}
ul#cssMenu table {border-collapse:collapse}
ul#cssMenu {
display:block;font-size:0;zoom:1;width:200px;float: left;}
ul#cssMenu ul{
//width:193px;padding:1px 1px 0;}
ul#cssMenu li{
display:block;zoom:1;margin:0 0 1px;font-size:0;}
ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none}
ul#cssMenu a{
display:block;vertical-align:middle;zoom:1;background-color:#f7f4e7;border-width:0px;border-style:none;border-color:#FFFFFF;text-align:left;text-decoration:none;padding:3px;_padding-left:0;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #054d03;text-decoration:none;cursor:auto;}
ul#cssMenu ul li {float:none;}
ul#cssMenu ul a{
text-align:left;white-space:nowrap;}
ul#cssMenu li:hover>a{
background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;}
ul#cssMenu li a:hover{
_position:relative;background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;}
ul#cssMenu img{
border: none;vertical-align: middle;margin-right:6px;width:24px;height:24px;}
ul#cssMenu ul img{
width:10px;height:15px;}
ul#cssMenu img.over{display:none}
ul#cssMenu li:hover > a img.def {display:none}
ul#cssMenu li:hover > a img.over {display:inline}
ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline}
ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none}
ul#cssMenu a:hover ul{display:block}
ul#cssMenu span{
display:block;overflow:visible;background-image:url(pfeil.png);background-position:right center;background-repeat: no-repeat;padding-right:16px;}
ul#cssMenu li:hover>a>span{background-image:url(pfeil_hover.png);}
ul#cssMenu a:hover span{_background-image:url(pfeil_hover.png)}
.underclass {cursor:auto;}
li {
list-style:none;
}
a {
text-decoration:none;
color:#165a29;
}
a:hover {
color:#c7232b;
}
a.start img {
border: none;
background: none;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
khtml-opacity: 0.7;
opacity: 0.7;
}
#cont_wrap {
margin:0 auto;
width:1000px;
padding-bottom:180px;
}
#cont_wrap:after {
content:".";
display:block;
clear:both;
font-size:0;
overflow:hidden;
height:.1px;
visibility:hidden;
}
#cont_wrap h1 {
color:#951b1b;
margin:30px 0;
}
#cont_wrap p {
text-align:left;
margin:0 0 0 250px;
width:600px;
}
#rahmen {
margin:0px 0 0 20px;
}
#bot_nav {text-align:center;
width:1000px;
height:130px;
margin:-135px auto 0;
}
#bot_nav #ul1 {
float:left;
margin:0 0 0 30px;
width:150px;
}
#bot_nav ul {float:left;
margin: 0 0 0 100px;
width:150px;
}
#bot_nav a {
color:white;
}
#bot_nav a:hover {
color:red;
}
Vielen Dank. |
