Css Navigationsmenü fehler in z-index

Status
Nicht offen für weitere Antworten.

Binio

Erfahrenes Mitglied
Hallo habe ein kleines Darstellungsproblem mit mein Mozilla Browser.
Möchte im Grunde ein einfaches pull-down-menü erzeugen.
Das CSS Script klappt auch super sofern ich nicht den rot markierten Bereich einfüge.
Ich denke es liegt am z-index. Jedoch habe ich schon aus lauter verzweifelung überall was als oben gewertet werden soll z-index:1; und darunter z-index:2; geschrieben.
Doch ich habe die ganze Zeit das gleiche Problem das die Menüs zwar aufklappen ich aber nicht drüber gehen kann.
PHP:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<head>
<title>Neues Design</title>
<style type='text/css'>
.inhalt {
width:100%;
height:100%;
overflow:auto;
z-index:2;
}
/* style the outer div to give it width */
.menu {
width:1020px; 
font-size:0.85em;
padding-bottom:0px;
z-index:1;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
z-index:1;
}
.menu ul ul {
width:102px;
z-index:1;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:102px;
position:relative;
z-index:1;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:91px; 
height:30px; 
border:1px solid #ffffff; 
border-width:1px 1px 0 0; 
background:#4e4ecf; 
padding-left:10px; 
line-height:29px;
z-index:1;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:100px;
z-index:1;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:100px; 
top:0;
width:100px;
z-index:1;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-100px;
z-index:1;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; z-index:1;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:79px;
z-index:1;
}



/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
z-index:1; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
z-index:1;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
z-index:1;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
z-index:1;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
z-index:1;
}


</style>
</head>

<body>

<table border='0' align='center' valign='top' width='1020' height='768' style='background-image:url(background.gif); background-repeat:no-repeat;'>
 <tr><td align='center' valign='top' height='60'>TOP</td></tr>
 <tr><td align='center'>
<div class='menu'>
<ul>
<li><a href='index.php'>Fahrschule<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php' title=''>Fahrschule Hamm</a></li>
    <li><a href='index.php' title=''>Fahrschüler Unna</a></li>
    <li><a class='drop' href='index.php' title=''>Anfahrt<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href='index.php' title=''>Fahrschule Hamm</a></li>
            <li><a href='index.php' title=''>Fahrschule Unna</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Führerscheinweg<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Fahrlehrer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php'>Alexander Koos</a></li>
    <li><a href='index.php'>Norman Jaskowski</a></li>
    <li><a href='index.php'>Waldemar Koos</a></li>
    <li><a href='index.php'>Wolfgang Meierkord</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Bildergalerie<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php' title='The zero dollar ads page'>Fahrschule</a></li>
    <li><a href='index.php' title='Wrapping text around images'>Fahrschüler</a></li>
    <li><a class='drop' href='index.php' title='Hover/click with no active/focus borders'>Fahrzeuge<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href='index.php' title='Styling forms'>PKW</a></li>
            <li><a href='index.php' title='Removing active/focus borders'>LKW</a></li>
            <li><a href='index.php' title='Hover/click with no active/focus borders'>Motor</a></li>
            <li><a href='index.php' title='Hover/click with no active/focus borders'>Sonstiges</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Eu Führerschein<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php'>A</a></li>
    <li><a href='index.php'>A1</a></li>
    <li><a href='index.php'>B</a></li>
    <li><a href='index.php'>BE</a></li>
    <li><a href='index.php'>C</a></li>
    <li><a href='index.php'>CE</a></li>
    <li><a href='index.php'>C1</a></li>
    <li><a href='index.php'>C1E</a></li>
    <li><a href='index.php'>D</a></li>
    <li><a href='index.php'>DE</a></li>
    <li><a href='index.php'>D1</a></li>
    <li><a href='index.php'>D1E</a></li>
    <li><a href='index.php'>M</a></li>
    <li><a href='index.php'>L</a></li>
    <li><a href='index.php'>T</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Verkehrsrecht<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php' title=''>Bußgeldrechner</a></li>
    <li><a href='index.php' title=''>Führerschein ab 17</a></li>
    <li><a href='index.php' title=''>Theoretischer Unterricht</a></li>
    <li><a href='index.php' title=''>Praktischer Unterricht</a></li>
    <li><a class='drop' href='index.php' title='Hover/click with no active/focus borders'>Verkehrssünden<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href='index.php' title=''>Abstand</a></li>
            <li><a href='index.php' title=''>Autobahn</a></li>
            <li><a href='index.php' title=''>Alkohol</a></li>
            <li><a href='index.php' title=''>Drogen</a></li>
            <li><a href='index.php' title=''>Fußgänger</a></li>
            <li><a href='index.php' title=''>Kindersicherung</a></li>
            <li><a href='index.php' title=''>Technische Mängel</a></li>
            <li><a href='index.php' title=''>Überholen</a></li>
            <li><a href='index.php' title=''>Vorfahrt</a></li>
            <li><a href='index.php' title=''>Rote Ampel</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Ausbildung<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Seminare<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href='index.php' title=''>ASP</a></li>
    <li><a href='index.php' title=''>ASF</a></li>
    <li><a href='index.php' title=''>FSF</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>News<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='index.php'>Feedback<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

 </td></tr>
     <tr><td align='center' valign='top' style='background-image:url(logobig.gif); background-repeat:no-repeat; width:1010px; height:664px;'>
         <div class='inhalt'>
        <?php include"inhalt.php" ?>
         </div>
     </td></tr>
</table>

</body>
</html>
 
Dann tausch mal die Werte für z-index, denn was in der Schichtposition oben sein soll, erhält den höheren z-index-Wert. Zudem funktioniert die z-index-Eigenschaft nur in Verbindung mit der position-Eigenschaft.

Die Angaben sind nur für das DIV .inhalt und .menu erforderlich.

Code:
.inhalt {
position:relative;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
/* style the outer div to give it width */
.menu {
position:relative;
width:1020px;
font-size:0.85em;
padding-bottom:0px;
z-index:2;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:102px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:102px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:91px;
height:30px;
border:1px solid #ffffff;
border-width:1px 1px 0 0;
background:#4e4ecf;
padding-left:10px;
line-height:29px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:100px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:100px;
top:0;
width:100px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-100px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; z-index:1;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:79px;
}



/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
 
Status
Nicht offen für weitere Antworten.
Zurück