XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   ul ul_hover überdecken (http://xhtmlforum.de/showthread.php?t=63312)

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>- Sumpfund 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">
        <
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>
        <
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>
        <
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>
        <
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;
    }
    
htmlbody {
        
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{
    
positionabsolute;left:98%;top:-1px;}
ul#cssMenu ul ul{
    
positionabsolute;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;floatleft;}
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{
    
bordernone;vertical-alignmiddle;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-repeatno-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 {
    
bordernone;
    
backgroundnone;
    
filter:alpha(opacity=70);
    -
moz-opacity0.7;
    
khtml-opacity0.7;
    
opacity0.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;
            
margin0 0 0 100px;
            
width:150px;
    }
    
#bot_nav    a    {
            
color:white;
    }
    
#bot_nav    a:hover    {
            
color:red;
    } 

Vielen Dank.

heiko_rs 22.12.2010 18:24

z-index für das pos. Element (der Wert 1 reicht).

Und korrigiere mal Deine fehlerhaften IE-CCs.

Muamicus 22.12.2010 18:32

Ah super vielen Dank !

Um die CCS kümmere ich mich noch.

heiko_rs 22.12.2010 18:56

Und evtl. auch mal um das fehlende Wort "nicht" in Deiner Signatur ;)

Muamicus 22.12.2010 19:05

Oh :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:16 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019