Niklas: Dropdownmenü geht in einigen Browsern nicht richtig/garnicht.

Hallo Community,

ich habe ein HTML und CSS (+ webkits) Dropdownmenü erstellt. Nun mein Problem ist: ich habe die Webseite immer unter der Firefox Developer Edition getestet. Bei einer Überprüfung mit Google Chrome habe ich festgestellt das sich das Dropdownmenü nicht ausklappt wenn ich über die Grafik (id=“networklogo“) gehe, bei der sich das Dropdownmenü normalerweise ausklappt, sondern einige Pixel unter der Grafik. Unter Opera habe ich anschließend auch getestet, dort geht es überhaupt nicht (zu meiner Verwunderung funktioniert es im Internet Explorer).

Das Dropdownmenu soll wie im folgenden Link sein nur mit Grafiken anstatt des Textes. http://www.script-tutorials.com/demos/364/index.html

Hier ist mein Code, ich hoffe ihr könnt mir helfen.

<!DOCTYPE html>
<html lang="de">

<head>

    <title>Titel</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div id="wapper">
        
        
        <div id="headline">

            <div id="netbar">
                
                
                
                <ul class="menu">
                    <li class="li_pos"><a href="#"><img alt="Networklogo" src="images/network-logo.png" id="networklogo" class="networklogo"></a>
                        <ul class="submenu">
                            <li><a href="#"><img src="images/RPGS.jpg" id="1"></a></li>
                            <li><a href="#"><img src="images/RPGS.jpg"></a></li>
                            <li><a href="#"><img src="images/RPGS.jpg"></a></li>
                            <li><a href="#"><img src="images/RPGS.jpg"></a></li>
                        </ul>
                    </li>
                </ul>

                
            </div> <!-- netbar -->

            <div id="login">
                <img alt="Login" src="images/login.png" id="loginbild">
            </div> <!-- login -->

        </div> <!-- headline -->


        <div id="header">
            <img alt="Headerbild" src="images/IMG_5854.JPG" id="headerbild">
        </div> <!-- header -->



        <div id="navi">

            <div id="menu1">
            </div> <!-- menu1 -->

            <div id="sozibox">
            </div> <!-- sozibox -->

        </div> <!-- navi -->



        <div id="content">

            <div id="in-content">                
            </div> <!-- in-content -->

        </div> <!-- content -->
        
    </div> <!-- wapper -->

</body>
    
</html>
body {
    margin: 0px; 
    padding: 0px;
}

div#headline {
    display: block;
    position: fixed;
    width: 100%;
    height: 4%;
    min-height: 30px;
    top: 0%;
    left: 50%;
    margin-left: -50%;
    background-color: #313131;
    box-shadow: 1px 1px 6px #000; 
    -webkit-box-shadow: 1px 1px 6px #000;
    -moz-box-shadow: 1px 1px 6px #000;
    -ms-box-shadow: 1px 1px 6px #000;
    -o-box-shadow: 1px 1px 6px #000;
    z-index: 48;
    
}

div#netbar {
    display: block;
    width: 100%;
    height: 4%;
    min-height: 25px;
    top: 0%;
    position: fixed;
}

img#networklogo {
    width: auto;
    min-height: 30px;
    height: 4%;
    display: block;
    top: 0%;
    left: 0%;
    position: fixed;
    z-index: 50;
}

div#login {
    display: block;
    width: 100%;
    height: 4%;
    min-height: 30px;
    top: 0%;
    position: fixed;
}

img#loginbild {
    width: auto;
    height: 100%;
    min-height: 30px;
    float: right;
    display: block;
    top: 0%;
    z-index: 49;
}

/* Ende Headline */

div#header img {
   background-position: center;
   background-repeat: no-repeat;
   padding: 0 100% 300px 0;
   position: fixed; 
   top: 4%;
   width: 100%;
}

div#content {
    display: block;
	width: 100%;
    height: 2000px;
    left: 50%;
    margin-left: -50%;
	position: relative;
	margin-top: 25%;
	background: #ebebeb;
}

/* menu styles */

.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu > li {
    display: block;
    float: left;
    position: relative;
    left: 1.65%;
}

.menu a {
    display: block;   
}



/* submenu styles */

.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
    list-style: none;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;
    list-style: none;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    list-style: none;
    border-radius: 0;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    list-style: none;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    list-style: none;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

  1. dein Code ist viel zu umfangreich, wer soll das als Webseite erstellen, um zu gucken was passiert?

    Das ist genau so, als würdest du sagen, dein Wagen springt nicht an und dann benennst du einen Parkplatz, auf dem die Helfer gefälligst deinen Wagen selber finden sollen.

    Wer mag da schon helfen, wnn du selbst so lustlos bist?

    Linuchs