Darstellungsproblem bei einem DropDown Menü

OutOfControl

Hallo zusammen,

ich habe ein Problem was ich einfach nicht wegbekomme! Ich bin Betreiber einer Internetseite für virtuellen Motorsport! Um meine Idee zu realisieren benutze ich ein CMS (Webspell). Nun habe ich folgendes Problem. Auf meiner Seite http://neu.simsport.de liegt die werdende Seite. Wenn ich mit der Maus über Überblick fahre bekomme ich Darstellungsfehler. Dieses DropDown Menü ist habe ich von folgender Seite und soll eigentlich ohne Fehler so aussehen: http://designmodo.com/demo/css3dropdownmenu/ .

Ich finde einfach nicht den Fehler der mein Problem behebt deshalb hoffe ich das ihr mir helfen könnt.

Hier die Quellcodes:

Einmal von die komplette Seite: (_Style.css). Diese ist für die komplette Seite zuständig.

Code

@charset "utf-8";
/* CSS Document */


body {
        background-image:url(style/background.jpg);
        background-repeat:no-repeat;
        background-attachment: fixed;
        background-color:#6af52c;
        margin:0px;
        padding:0px;
}


#page {
        width:1000px;
        height:auto;
        background-image:url(style/bg_content.png);
        background-repeat:repeat-y;
        margin:auto;
        padding:0px;
}


.clear {
        clear:both;
}


.html-title {
        font-family:Tahoma, Geneva, sans-serif;
        font-size:11px;
        text-decoration:none;
        font-weight:bold;
        color:#919191;
        height:29px;
        line-height:29px;
}


#overline {
        width:1016px;
        height:178px;
}






#header {
        width:1000px;
        height:178px;
        background-image:url(style/header.jpg);
        background-repeat:no-repeat;
}


#login {
        width:485px;
        height:178px;
        padding-left:515px;
        margin-top:-30px;
}


.login-include {
        width:485px;
        height:25px;
        background-image:url(style/bg_login.jpg);
        background-repeat:no-repeat;
}


.login-font, .login-font:visited {
        font-family:Tahoma, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
}


.login-font:hover {
        font-family:Tahoma, Geneva, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        text-decoration:none;
}


#lo-1 {
        width:71px;
        height:25px;
        background-image:url(style/login_1.jpg);
        float:left;
}


#lo-2 {
        width:69px;
        height:25px;
        background-image:url(style/login_2.jpg);
        float:left;
}


#lo-3 {
        width:77px;
        height:25px;
        background-image:url(style/login_3.jpg);
        float:left;
}


#lo-4 {
        width:71px;
        height:25px;
        background-image:url(style/login_4.jpg);
        float:left;
}


#lo-5 {
        width:21px;
        height:25px;
        background-image:url(style/login_5.jpg);
        float:left;
}


#lo-6 {
        width:35px;
        height:25px;
        float:left;
}


#lo-7 {
        width:141px;
        height:25px;
        float:left;
}


#navi {
        position:absolute;
        width:1016px;
        height:48px;
        z-index:10000;
}


#navi ul {
        list-style:none;
        margin:0px;
        padding:0px;
        border:none;
        height:48px;
}


#navi ul li {
        list-style:none;
        margin:0px;
        padding:0px;
        border:none;
        float:center;
        height:48px;


}


#spe-top {
        width:1016px;
        height:155px;
}


#special {
        width:593px;
        height:155px;
        float:left;
        background-image:url(style/bg_special.jpg);
        background-repeat:no-repeat;
        z-index:10;
}


/* 339ee1 */
.sliderwrapper2{
        overflow: hidden;
        border: none;
        width: 593px;
        height:auto;
}
.sliderwrapper2 .contentdiv{
        visibility: hidden;
        padding: 0px;
        margin:0px;
        overflow:hidden;
        width: 289px;
        height:auto;
}
.pagination2{
        width:100%;
        height:auto;
        overflow:hidden;
        padding:0px;
}
.pagination2 a, .pagination2 a:visited, .pagination2 a:hover{
        display:block;
        height:80px;
        width:278px;
        text-decoration:none;
        outline:none;
}


.sliderwrapper{
        position: relative;
        overflow: hidden;
        border: none;
        width: 548px;
        height: 151px;
}
.sliderwrapper .contentdiv{
        visibility: hidden;
        position: absolute;
        padding: 0px;
        margin:0px;
        overflow:hidden;
        background-color:transparent;
        width: 545px;
        height: 160px;
}
.pagination{
        width:41px;
        background-color: transparent;
        height:auto;
        padding-top:7px;
        overflow:hidden;
        float:left;
        text-align:center;
}
.pagination a, .pagination a:visited{
        width:19px;
        height:18px;
        margin:0px 0px 6px 0px;
        padding-left:12px;
        line-height:16px;
        font-weight:bold;
        text-align:center;
        text-decoration:none;
        display:block;
        outline:none;
        color:#FFFFFF;
}
.pagination a:hover, .pagination a.selected{
        width:19px;
        height:18px;
        margin:0px 0px 6px 0px;
        padding-left:12px;
        line-height:16px;
        font-weight:bold;
        text-align:center;
        text-decoration:none;
        display:block;
        outline:none;
        color:#FFFFFF;
}


#topmatch {
        width:409px;
        height:155px;
        float:left;
        background:url(style/topmatch_bg.jpg) no-repeat;


}


#content {
        width:1016px;
        height:auto;


}




.bg-headlines {
        background-image:url(style/bg_headlines.jpg);
        width:230px;
        height:198px;
        background-repeat:no-repeat;
        margin:0px;
        padding:0px;
}


.bg-server {
        background-image:url(style/bg_server.jpg);
        width:230px;
        height:414px;
        background-repeat:no-repeat;
        margin:0px;
        padding:0px;
}


.topiclink {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
        text-decoration:none;
}


.topiclink, .topiclink:visited {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
        text-decoration:none;
        overflow:hidden;
}


.topiclink:hover {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        text-decoration:none;
        overflow:hidden;
}


.boardlink, .boardlink:visited {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


.boardlink:hover {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


.headlines, .headlines:visited {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


.headlines:hover {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


.results, .results:visited {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#b3b3b3;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


.results:hover {
        font-family:Verdana, Geneva, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        text-decoration:none;
        font-weight:bold;
        overflow:hidden;
}


#co-middle {
        width:960px;
        height:auto;
        float:left;
}


#static {
        width:1016px;
        height:23px;
        background-image:url(style/bg_stats.jpg);
        background-repeat:no-repeat;
}


#news {
        padding-left:60px;
        padding-right:6px;
}


#gallery {
        width:542px;
        height:41px;
}


#gallery-title {
        width:542px;
        height:41px;
        background-image:url(style/gallery_title.jpg);
        background-repeat:no-repeat;
}

Alles anzeigen

Das hier ist das Stylesheet was für das Menü zuständig ist. (_menue.css)

Code

.menu,
.menu ul,
.menu li,
.menu a {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
}


/* Menu */
.menu {
        height: 40px;
        width: 1000px;


        background: #404140;
        background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);


        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
}


.menu li {
        position: relative;
        list-style: none;
        float: left;
        display: block;
        height: 40px;
}


/* Links */


.menu li a {
        display: block;
        padding: 0 33px;  /* Wert für Abstand zwischen den Elementen */
        margin: 8px 0;
        line-height: 28px;
        text-decoration: none;


        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;


        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;


        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);


        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
}


.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }


.menu li:hover > a { color: #8fde62; }


/* Sub Menu */


.menu ul {
        position: absolute;
        top: 40px;
        left: 0;


        opacity: 0;


        background: #1f2024;


        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;


        -webkit-transition: opacity .25s ease .1s;
        -moz-transition: opacity .25s ease .1s;
        -o-transition: opacity .25s ease .1s;
        -ms-transition: opacity .25s ease .1s;
        transition: opacity .25s ease .1s;
        z-index:10000;
}


.menu li:hover > ul { opacity: 1; }


.menu ul li {
        height:10px;
        overflow: hidden;
        padding: 0;


        -webkit-transition: height .25s ease .1s;
        -moz-transition: height .25s ease .1s;
        -o-transition: height .25s ease .1s;
        -ms-transition: height .25s ease .1s;
        transition: height .25s ease .1s;
}


.menu li:hover > ul li {
        height: 36px;
        overflow: visible;
        padding: 0;
}


.menu ul li a {
        width: 100px;
        padding: 4px 0 4px 40px;
        margin: 0;


        border: none;
        border-bottom: 1px solid #353539;
}


.menu ul li:last-child a { border: none; }


/* Icons */


.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Alles anzeigen

Und die index.php wäre evtll auch noch zu gebrauchen:

PHP

<?php
/*
##########################################################################
#                                                                        #
#           Version 4       /                        /   /               #
#          -----------__---/__---__------__----__---/---/-               #
#           | /| /  /___) /   ) (_ `   /   ) /___) /   /                 #
#          _|/_|/__(___ _(___/_(__)___/___/_(___ _/___/___               #
#                       Free Content / Management System                 #
#                                   /                                    #
#                                                                        #
#                                                                        #
#   Copyright 2005-2011 by webspell.org                                  #
#                                                                        #
#   visit webSPELL.org, webspell.info to get webSPELL for free           #
#   - Script runs under the GNU GENERAL PUBLIC LICENSE                   #
#   - It's NOT allowed to remove this copyright-tag                      #
#   -- http://www.fsf.org/licensing/licenses/gpl.html                    #
#                                                                        #
#   Code based on WebSPELL Clanpackage (Michael Gruber - webspell.at),   #
#   Far Development by Development Team - webspell.org                   #
#                                                                        #
#   visit webspell.org                                                   #
#                                                                        #
##########################################################################
*/


// important data include
include("_mysql.php");
include("_settings.php");
include("_functions.php");
include("_navigation.php");


$_language->read_module('index');
$index_language = $_language->module;
// end important data include
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="free webSPELL Clan Template by www.gamer-designs.de" />
<meta name="author" content="gamer-designs.de" />
<meta name="keywords" content="webspell, template, clan" />


<!-- Head & Title include -->
<title><?php echo PAGETITLE; ?> - Template by gamer-designs.de edit by Simsport.de</title>
<link href="_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="_style.css" rel="stylesheet" type="text/css" />
<link href="_menue.css" rel="stylesheet" type="text/css" />
<link href="tmp/rss.xml" rel="alternate" type="application/rss+xml" title="<?php echo getinput($myclanname); ?> - RSS Feed" />
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<script src="js/contentslider.js" language="jscript" type="text/javascript"></script>
<!-- end Head & Title include -->


</head>
<body>
<div id="page">
        <div id="overline">
           <div id="header"></div>
                <div id="login">
                      <div class="login-include"><?php include("login.php"); ?></div>
                </div><!--DIV HEADER/LOGIN END-->


        </div><!--DIV OVERLINE END-->
        <div id="navi">
        <ul class="menu" z-index:99>
        <li><a href="index.php?site=start">Home</a></li>
        <li><a href="index.php?site=forum">Forum</a></li>
        <li><a href="index.php?site=calendar">Eventkalender</a></li>
        <li><a href="index.php?site=forum">Server</a></li>
        <li><a href="index.php?site=forum">Teamspeak</a></li>
        <li><a href="index.php?site=#">&Uuml;berblick</a>
               <ul>
                        <li><a href="#">LiveView</a></li>
                        <li><a href="#">HotLaps</a></li>
                        <li><a href="#">Stream</a></li>
                </ul>
        </li>
        <li><a href="index.php?site=#">Dateien</a></li>
        <li><a href="index.php?site=about">&Uuml;ber Uns</a></li>
        </ul>




</div><!--DIV NAVI END-->
        <div id="spe-top">
                <div id="special">
                <div id="features_big">
                        <div>
                                        <div id="paginate-slider1" class="pagination" style="padding-left:3px;">
                            <a class="toc" href="#">1</a>
                        <a class="toc" href="#">2</a>
                        <a class="toc" href="#">3</a>
                        <a class="toc" href="#">4</a>
                        <a class="toc" href="#">5</a>
                        <a class="toc" href="#">6</a>
                    </div>
                        <div id="slider1" class="sliderwrapper" style="padding-top:2px;">
                            <?php include("features.php"); ?>
                    </div>
                        <script type="text/javascript">
                                          featuredcontentslider.init({
                                          id: "slider1",  //id of main slider DIV
                                          contentsource: ['inline', ''],  //Valid values: ['inline', ''] or ['ajax', 'path_to_file']
                                          toc: "markup",  //Valid values: "#increment", "markup", ['label1', 'label2', etc]
                                          nextprev: ['', ''],  //labels for "prev" and "next" links. Set to "" to hide.
                                          revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
                                          enablefade: [true, 0.3],  //[true/false, fadedegree]
                                          autorotate: [true, 3000],  //[true/false, pausetime]
                                          onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
                                          //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
                                          //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
                                         }
                                           })
                                  </script>
                             </div>


                  </div>
        </div>
                <div id="topmatch"><?php include("sc_topmatch.php"); ?></div>
        </div><!--DIV SPE-TOP END-->


        <div id="content">
           <div id="co-middle">
                <div id="static"><?php include("counter.php"); ?></div><!--DIV STATIC END-->
            <div id="news">
            <?php
                                if(!isset($site)) $site="news";
                                $invalide = array('\\','/','/\/',':','.');
                                $site = str_replace($invalide,' ',$site);
                                if(!file_exists($site.".php")) $site = "news";
                                include($site.".php");
                        ?>
            </div><!--DIV NEWS END-->


        </div><!--DIV CO MIDDLE END-->
         <div><img src="style/footer.jpg" alt="" width="1000" height="123" border="0" usemap="#Map" />
        <map name="Map" id="Map">
                <area shape="rect" coords="887,11,937,22" href="index.php?site=contact" alt="" />
                <area shape="rect" coords="951,11,999,22" href="index.php?site=imprint" alt="" />
                <area shape="rect" coords="406,32,543,44" href="http://www.Gamer-Designs.de" target="_blank" alt="free webSPELL Clantemplates" title="free webspell clantemplates" />
        </map>
        </div><!--DIV FOOTER END-->
</div><!--DIV PAGE END-->
</body>
</html>

Alles anzeigen

Ich hoffe ihr könnt mir helfen.

Regards

threadi

Hilfreich alleine ist schon der Link den Du gepostest hast. Dein ganzer Quellcode hier bringt niemandem wirklich etwas, insbesondere letzterer da dieser die für eine Fehldarstellung unerheblicher PHP-Quellcode ist.

In der HTML-Ausgabe unter deinem Link kann man schonmal ein Problem erkennen. Dort steht:

HTML

<ul class="menu" z-index:99>

Korrekt wäre

HTML

<ul class="menu" style="z-index:99;">

Noch besser wäre

HTML

<ul class="menu">

und die Angabe vom z-index in der CSS-Datei:

Code

.menu { z-index: 99; }

Die Angabe eines z-index wirkt jedoch nur bei nicht-static positionierten Elementen. Also müsstest Du bei .menu auch noch

Code

position: relative;

ergänzen.

Um das Aufklappmenü sauber hinzubekommen, muss das umgebende Element (das <li> des Menüpunktes) relativ positioniert sein, mit einem niedrigen z-index. Das Aufklappmenü (also das <ul> innerhalb des <li>) müsste wiederum absolut positioniert sein und einen höheren z-index haben.

Beispiele dafür findest Du z.B. hier:
http://www.ohne-css.gehts-gar.net/0066.php
http://www.ohne-css.gehts-gar.net/0067.php
http://www.drweb.de/magazin/das-pe…in-dimensionen/

Tags