css navigation untermenü einblenden

Greenhorn23 · 12.11.2007, 20:18

hi @ all,

als erstes muss ich mich mal für die dumme/n frage/n entschuldigen, aber ich finde nicht wirklich etwas, dass mir das ganze irgendwie verständlich erklärt. dank rinaldos tipp (http://nicogutmann.de/tuts/?p=15) hab ich das ganze auch verstanden und konnte auch alles so anpassen wie ich wollte.
nun möchte ich aber wenn ich über einen button fahre, dass dieser nach unten aufgeht.
die unterpunkte kann ich auch mit display:none verschwinden lassen, aber ich bekomme sie nicht mehr mit display:block zum vorschein.
welche klassen muss ich denn für die unterpunkte definieren?
ul li a:hover ul; ul li a ul; ul li ul ?
wie wird denn die position, dieser unterelemente bestimmt, wird das auch mit absolut gemacht? wird mit float: left und absolut das untermenü auch horizontal dargestellt?
vielen dank schonmal an alle, die sich die zeit nehmen und es mir erkären.

gruß
greenhorn

p.s. nicht schimpfen ich arbeite das http://www.css4you.de/wscss/index.html schon durch

Mich@el · 12.11.2007, 20:37

Hi Greenhorn, wie genau soll denn die Navi aussehen? Auf meiner Abo Seite

... habe ich´s gelernt, wie man/frau eine Navi aussehen lassen kann und natürlich dann auch die Funktionsweise derer.

Grüße
Michael

Greenhorn23 · 13.11.2007, 08:38

ich hätte es gern so: http://www.cssplay.co.uk/menus/drop_definition.html zumindest in der art, aber als ich mir den css code angeschaut habe, wird dort mit dd dt dl usw. gearbeitet und im css "verschachtelt" (mit dem , ) .
rinaldo hatte es schon versucht (danke), aber ich steh da voll und ganz auf dem schlauch.
deswegen auch meine vielen fragen.

Mich@el · 13.11.2007, 15:02

Zitat:

Zitat von Greenhorn23

... wird dort mit dd dt dl usw. gearbeitet und im css "verschachtelt" (mit dem , ) .

... und? Was ist daran schlecht?

Greenhorn23 · 13.11.2007, 15:49

schlecht ist daran nichts, wenn man etwas verkürzen kann, nur für einen absoluten anfänger etwas unübersichtlich.
aber...ich kann die verschachtelung auch auflösen und extra stellen und umbenennen, dann wird mir vielleicht ein licht aufgehen.
ich sag dann mal bis heute abend mit der nächsten frage und danke für die geduld

Greenhorn23 · 13.11.2007, 19:15

ich schnalls nicht

das ist meine liste, die ich nun angepasst habe

<ul id="Navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="geschichte.htm">Geschichte</a></li>
<li><a href="#">Gallerie</a>

<ul><a href="#">Treiben</a></ul>

<ul><a href="#">Päcklepacken</a></ul>

<li><a href="#">Gästebuch</a> </li>
<li><a href="#">Kontakt</a></li>
</ul>

Code:

ul {
margin:0;
padding:0;
position: absolute;
left: 185px;
top: 175px;
text-align:center;
z-index: 101 

}

ul li {
float:left; 
width:120px;
line-height:1.5;
list-style:none;
margin-right:10px; 


}

ul li ul {
display: none;

}


ul li a {
display:block;
width:100%;
font-weight: bold;
color:maroon;
background:#CECFD0;
text-decoration:none
}


ul li a ul {
display:block;
width:100%;
font-weight: bold;
color:maroon;
background:#CECFD0;
text-decoration:none
}


ul li a:hover {
color:white;
background:gray;
}


ul li a:hover ul {
color:white;
background:gray;
display:block
}

li ul:hover  {
display:block
}

Rinaldo · 13.11.2007, 19:59

Schreib hier doch bitte mal die Struktur Deines Menüs - also die Oberpunkte und deren einzelne Unterpunkte...

Greenhorn23 · 13.11.2007, 20:04

in der liste vorher sind die menüpunkte
home geschichte gallerie (unterpunkte: treiben + päcklepacken) gästebuch kontakt

Rinaldo · 13.11.2007, 20:38

Deine Liste müsste eher so aufgebaut sein:

HTML-Code:

<ul>
   <li>
      <dl class="gallery">
         <dt><a href="#">MENÜ1</a></dt>
            <dd><a href="#">M1.1</a></dd>
            <dd><a href="#">M1.2</a></dd>
            <dd><a href="#">M1.3</a></dd>
      </dl>
   </li>
   <li>
      <dl>
         <dt><a href="#">MENÜ2</a></dt>
            <dd><a href="#">M2.1</a></dd>
            <dd><a href="#">M2.2</a></dd>
      </dl>
   </li>
   <li>
      <dl>
         <dt><a href="#">MENÜ3</a></dt>
            <dd><a href="#">M3.1</a></dd>
            <dd><a href="#">M3.2</a></dd>
            <dd><a href="#">M3.3</a></dd>
            <dd><a href="#">M3.4</a></dd>
      </dl>
   </li>
<ul>

Greenhorn23 · 14.11.2007, 18:36

danke
ich werde mich am we dann noch mit der anderen seite als beispiel hinsetzen und durchmachen und hoffe ich kann euch eine frohe botschaft überbringen, dass das ganze funktioniert
jetzt ruft erstmal die heiße wanne und ein tee

Greenhorn23 · 18.11.2007, 16:17

hi,

danke es funktioniert jetzt auch im ie.
jetzt heißt es nur noch alles so anpassen wie ich es möchte und dann kann sie online gehen.
wieso wird eigentlich dieser eintrag gebraucht? dieser eintrag hat mir einige nerven gekostet:


werden dort die tags in der liste umgewandelt?
benötige ich dann sowas auch für den ie7

koenixblau · 20.11.2007, 10:26

Zitat:

Zitat von Greenhorn23

hi,

danke es funktioniert jetzt auch im ie.
jetzt heißt es nur noch alles so anpassen wie ich es möchte und dann kann sie online gehen.
wieso wird eigentlich dieser eintrag gebraucht? dieser eintrag hat mir einige nerven gekostet:


werden dort die tags in der liste umgewandelt?
benötige ich dann sowas auch für den ie7

Zum Thema: http://www.css4you.de/wsbw/index.html

Zitat:

EDIT

Falls es noch aktuell ist.