XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit CSS Dropline menü (http://xhtmlforum.de/showthread.php?t=58041)

horst77 11.08.2009 19:19

Problem mit CSS Dropline menü
 
Hallo lieber CSS Experten,

ich möchte gerne ein Droplinemenü mit CSS realisieren. Leider versuche ich seit mehreren Tagen vergeblich das Problem zu lösen, aber ohne Erfolg.

Mein Menü soll folgende Darstellung haben.
Das obere Menü soll beim aktivierten Zustand eine andere Hintergrundfarbe haben (in der CSS => class="current"). Das klappt auch soweit. Nur das Submenu macht mir sehr viele Probleme. Da mein HTML eine verschachtelte Form hat, übernimmt das Submenu alle Formatierungen vom Hauptmenü.
Ich hab den Verdacht, dass das Submenü vom Hauptmenü die Formatierungen vererbt. Ich kann es aber irgendwie nicht vermeiden, da ich den Fehler nicht finden kann. Bitte hilft mir, ich bin sehr am verzweifeln:cry:

Hier ist mein HTML-Code
HTML-Code:

<!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">
    <head>
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <title>Navigationsmenü mit zwei Ebenen</title>
          <link rel="stylesheet" href="top_navi.css" type="text/css" media="screen" />
    </head>
<body>
<div id="naviWrapper">
        <div id="Navigation">
                <ul class="menu">
                        <li><a href="#">Home</a></li>

                        <li><a href="#">Menüpunkt_1</a></li>
               
       
                        <li><a href="#">Menüpunkt_2</a>
                                <!--Untermenü von Menüpunkt_2-->
                                        <ul class="sub_menu">
                                                <li><a href="#">Menüpunkt_2.1</a></li>
                                                <li class="sub_current"><a href="#">Menüpunkt_2.2</a></li>
                                                <li><a href="#">Menüpunkt_2.3</a></li>
                                                <li><a href="#">Menüpunkt_2.4</a></li>
                                        </ul>
                                <!--Ende Untermenü-->
                        </li>
       
                        <li><a href="#">Menüpunkt_3</a></li>
               
                        <!--Untermenü von Menüpunkt_4-->
                        <li><a href="#">Menüpunkt_4</a>
                                <ul class="sub">
                                        <li><a href="#">Menüpunkt_4.1</a></li>
                                        <li><a href="#">Menüpunkt_4.2</a></li>
                                        <li><a href="#">Menüpunkt_4.3</a></li>
                                        <li><a href="#">Menüpunkt_4.4</a></li>
                                </ul>
                        </li>
                        <!--Ende Untermenü-->
                                       
                                <li><a href="#">Menüpunkt_5</a></li>
                                <li><a href="#">Menüpunkt_6</a></li>
                        </ul>
        </div>
</div>
</body>
</html>


/*CSS*/
Code:

/*Navigation*/

body{
        font-size:62.5%;
}
#naviWrapper {
        background-color:#fff1e6;
        border-left:1px solid #666666; /*äußere Rahmen f&uuml;r die Navigation*/
        border-right:1px solid #666666;
        border-bottom:2px solid #9e131c;
        clear: left;
        margin:50px auto; /*nur hier, ansonsten 0*/
        overflow:hidden;
        width:80%;
        height:4.8em;
}

#Navigation {
        background:#fff1e6 url(Navi.gif) repeat-x scroll 0 0;
        float:left;
        height:2.3em;
        width: 100%;
        position: relative;
}

#Navigation ul li {
        display: inline;
        float: left;
        margin: 0;
        width: auto;
        padding:0;
        height:auto;
        /*border: 1px dashed #FFFF00;*/
       
}

#Navigation  .menu, #Navigation  .current {
        margin:0;
        padding:0;
        list-style:none;
        display:block;
       
}
#Navigation .menu a, #Navigation .current a {
        color:#EAEAEA;
        display: block;
        float:left;
        font-family: Arial;
        font-size: 1.2em;
        font-weight: bold;
        font: Arial, Helvetica, sans-serif;
        height: 100%;
        margin: 0 auto;
        position: relative;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        padding: 3px 10px 10px 10px;/*richtet den oberen Menüzeile auf dem Hintergrundbild*/
        }
       
#Navigation .current a{
        background-color: #fff1e6;
        border-top: 3px solid #9e131c;
        color: #000000;
        padding-top: 1px;
}
       
#Navigation .menu a:hover,
#Navigation .menu li:hover a {
        background-position:0 -75px;
        cursor:pointer;
        background-color: #fff1e6;
        border-top: 3px solid #9e131c;
        color: #000000;
        padding-top: 1px;
        }
/*-----------------------------------------------------------------------------
        Untermenü
-------------------------------------------------------------------------------*/
#Navigation ul li ul li{
        display: inline;
        float: left;
        margin: 0;
        width: ;
        padding:1px;
        height:auto;
        /*border: 1px dashed #00FF00;*/
}
#Navigation .sub{
        position:absolute;
        left:-1000px;
        top:-1000px;
        width:0;
        height:0;
        overflow:hidden;
        display:inline;
/*        display: none;*/
}

#Navigation .sub_menu {
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
        margin:0;
        padding:0;
}
#Navigation .sub_menu{
        /*background:##fff1e6 none repeat scroll 0 0;*/
        color:#000000;
        display:block;
        left:0;
        padding:0;
        position:absolute;
        top:25px;
        width: 100%;
        /*height:13px;*/
        z-index:10;
        margin: 0;
       


}

#Navigation .sub_menu a {

        background:#fff1e6 url(http://www.stunicholls.com/menu/pro_dropline_4/diamond.gif) no-repeat scroll right 35%;
        border:0 none;
        color:#818080;
        display:block;
        float:left;
        font-size:1.1em;
        font-family:arial;
        /*height:23.5px;*/
        line-height:20px;
        margin:0;
        padding:1px 10px 10px;
        text-decoration:none;
        white-space:nowrap;

}

#Navigation .sub_menu a:hover {
        color:#000000;
        text-decoration: underline;
       
}

#Navigation .sub_current a{
color:#000000;
}


horst77 12.08.2009 12:49

Hallo Leute!!

Problem gelöst und sehr glücklich :lol:
Es war doch noch eine Vererbungsproblem.

LG
Horst


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:10 Uhr.

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

© Dirk H. 2003 - 2019