Forum

[donderigo]

Hallo,
ich suche schon seit Wochen erfolglos nach einer vermeintlich einfachen Lösung. Bei einer horizontalen Navigation soll die zweite Ebene nach unten aufklappen. Es gibt unzählige Tutorials im Netz, die ich auch schon durchforstet habe, allein: ich bekomme es nicht angepasst. Hat mir eine7r von euch einen Tipp, wo mein Denkfehler liegt?

Code: Alles auswählen

ul.rex-navi1, li.rex-navi1
{
margin-top: 10px;
margin-left: 0px;
float: left;
font-size: 12pt;
text-align: left;
list-style-type: none;
padding-right: 5px;
padding-left: 5px;
font-size: 12pt;
}

.rex-navi1 a
{
color: white;
padding-left: 0px;
padding-right: 1em;
text-decoration: none;
}

.rex-navi1 a:focus
{
color: black;
}

.rex-navi1 a:hover
{
text-decoration: underline;
}

.rex-navi1 a.rex-current
{
text-decoration: underline;
color: black;
}

ul.rex-navi2, li.rex-navi2
{
position: relative;
margin-left: -25px;
margin-top: 35px;
}


#nav
{
height: 42px;
text-align: left;
margin: auto;
width: 950px;
border-top: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-color: white;
background: url(menu.png) bottom left repeat-x;
margin-top: 3px;
}


Die Seite liegt hier [url]http://www.bacchusjünger.de[/url]

[Oliver.Kreischer]

Hallo ?,

versuche doch mal das hier (einfach mit in die CSS Datei packen):

Code: Alles auswählen

#nav ul.rex-navi2 {
   position: absolute;
   left: 0;
   display: inline-block;
   margin: 37px 0 0 75px;
}

#nav ul.rex-navi2 li  {
   margin: 0px;
   padding: 0px;
}

#nav ul.rex-navi2 li a {
   display: block;
   font-size:  13px;
   color: #000;
}


LG
Oliver
Im Footer fehlt ein > und einige CSS Dateien sind entwder falsch verlinkt oder nicht vorhanden...

[donderigo]

Danke, Oliver,

leider bringt das noch nicht den Erfolg. Die 2. Ebene erscheint nebeneinander, ich hätte sie gerne vertikal runtergeklappt. Vlt. habe ich mich auch missverständlich ausgedrückt.

Ich hätte gerne

HOME WEINPROBEN LINKS <- 1. Ebene
1990 - 2000 <- 2. Ebene
2000 - 2010
2010 - 2020

Jetzt sieht's aber so aus:
[url=http://www.bacchusjünger.de/index.php?article_id=8]www.bacchusjünger.de[/url]

[Oliver.Kreischer]

Hi,

das eine nennt sich Dropline- und das andere Dorpdown Navigation.

Versuche mal das hier:

Code: Alles auswählen

#nav
{
height: 42px;
text-align: left;
margin: auto;
width: 950px;
border-top: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-color: white;
background: url(menu.png) bottom left repeat-x;
}

#nav li {
   list-style: none;
   float: left;
   height:  30px;
   }
#nav li a {
   display: block;
   color: #fff;
   text-decoration: none;
   }
#nav li ul {
   display: none;
   background-color: #69f;
   z-index:  10;
   }
#nav li:hover ul, #nav li.hover ul {
   width:  150px;
   display: block;
   position: absolute;
   margin: 20px 0 0 0;
   padding: 0; }
#nav li:hover li, #nav li.hover li {
   height:  15px;
   float: left;
   }
#nav li:hover li a, #nav li.hover li a {
   font-size:  12px;
   text-align:  left;
   background-color: #69f;
   color: #000;
   }
#nav li li a:hover {
   background-color: #8db3ff;
   }



Das Beispiel findet sich hier:

http://www.cssnewbie.com/example/css-dropdown-menu/

LG
Oliver

[donderigo]

Hi Oliver,

vielen Dank. Das sieht ja schon sehr gut aus. Jetzt mache ich mich an die Anpassung.

Gruß
don

[donderigo]

Hi,

ich bin schon sehr weit gekommen, allein: ein Schritt fehlt noch. Ich möchte, dass mein Submenü aufklappt, wenn über die Hauptnavigation "gehovert" wird. Leider klappt es erst auf, wenn der Hauptmenüpunkt aktiv ist. Wo ist mein Denkfehler?

Die Seite ist: [url]http://www.bacchusjünger.de[/url], es handelt sich um den Hauptmenüpunkt "Weinproben".

Der css-Code ist hier:

Code: Alles auswählen

#nav
{
height: 42px;
text-align: left;
margin: auto;
width: 950px;
background: url(menu.png) bottom left repeat-x;
}

#nav a:hover
{
margin-left:-24px;
line-height: 40px;
border-style: solid;
border-color: white;
border-top-width: 0pt;
border-bottom-width: 0pt;
border-left-width: 1pt;
border-right-width: 1pt;
background: url(menu_akt.png) bottom left repeat-x;
}

#nav a
   {
   text-align: center;
   padding-left:21px;
   margin-left: -23px;
   line-height:41px;
   padding-right: 21px;
   width: 120px;
   border-style: solid;
   border-color: white;
   border-left-width:0;
   border-right-width:1pt;
   border-bottom-width: 0pt;
   border-top-width: 0pt;
   }

#nav li {
   list-style: none;
   float: left;
   height:  30px;
   }
#nav li a {
   display: block;
   color: #fff;
   text-decoration: none;
   }

#nav li ul {
   display: none;
   z-index:  10;
   }
#nav li:hover ul, #nav li.hover ul {
   width:  120px;
   display: block;
   position: absolute;
   margin: 42px 0 0 0;
   padding: 0; }
#nav li:hover li, #nav li.hover li {
   height:  41px;
   margin-left:-26px;
   float: left;
   }
#nav li:hover li a, #nav li.hover li a {
   font-size:  15px;
   margin-left: -10px;
   text-align:  center;
   width: 120px;
   border-style: solid;
   border-color: white;
   border-left-width:0;
   border-right-width:0;
   border-top-width: 1pt;
   border-bottom-width: 1pt;
   background-color: #51a42b;
   color: #000;
   }
#nav li li a:hover {
   background-color: #98c981;
   }
   
#nav li a.rex-current
   {
   margin-left:-24px;
   line-height: 40px;
   border-style: solid;
   border-color: white;
   border-top-width: 0pt;
   border-bottom-width: 0pt;
   border-left-width: 1pt;
   border-right-width: 1pt;
   background: url(menu_akt.png) bottom left repeat-x;
   }

Vielen Dank für eure Hilfe,

don

[Oliver.Kreischer]

Hi,

das ist ein etwas anderer Ansatz.

Momentan ist es so, dass wenn Du auf der Startseite bist ja gar keine Subnavigationspunkte im Quelltext vorhanden sind...

Du musst die Nav also so ausgeben, dass immer alle Navigationspunkte im Quelltext geschrieben werden. der Rest ist CSS und/oder Javascript.

Vielleicht hilft Dir das ja:

http://www.redaxo.org/de/download/templ ... ate_id=133

LG
Oliver

[donderigo]

Hi Oliver,

vielen Dank, das schau ich mir mal genauer an.

Groß
don