[Korasu]

Tag,

ich habe ein kleines Problem. Im Anhang schon das Beispiel.
Ich habe einen Menüpunkt (In dem Fall "showroom") und möchte das beim draufklicken drunter noch weitere Stichpunkte auftreten. Ebend "web und logo". Nun ich habe gelesen das es mit :bevor und :after geregelt wird, konnte mich aber noch nicht genau damit befassen.

Meine Frage an euch: Wie genau regel ich das?


Edit: Vielleicht passts auch eher in den Bereich CSS.

[fricca]

Vermutlich suchst du ein Dropdown-Menü. Beispiele findest du in den FAQ des CSS-Bereiches.
Wenn du das Submenü bei Klick einblenden willst brauchst du JavaScript.

[Korasu]

Danke, ich werd mich da mal durcharbeiten.

[schman]

Vielleicht schaust du mal bei CSSPlay nach, da gibts einige solcher Menüs

[Korasu]

Zitat von schman

Vielleicht schaust du mal bei CSSPlay nach, da gibts einige solcher Menüs

Danke, habe ich schon. So ganz schau ich da noch nich durch.

[Korasu]

Also ich brauch da jetzt doch mal ein wenig hilfe. Ich blick da noch nicht ganz durch.

Der HTML-Code:

<div class="top">
<ul id="topNavi">
<li><a href="#" class="kontakt">&nbsp;</a></li>
<li><a href="#" class="korasu">&nbsp;</a></li>
<li><a href="#" class="showroom">&nbsp;</a>
<ul>
<li><a href="#">- web</a></li>
<li><a href="#">- logo</a></li>
</ul>
</li>
</ul>
</div>

Der CSS-Code:

.top {
height: 235px;
width: 732px;
text-align: right;
color: #636571;
}

#topNavi {
height: 101px;
}

#topNavi li {
list-style-type: none;
display: inline;
position: relative;
}

#topNavi li ul {
position: absolute;
display: none;
float: right;
}

#topNavi li:hover ul {
display: block;
position: absolute;
left: 200px;
float: right;
}

#topNavi li:hover ul li {
margin: 50px 300px 0 0;
width: 30px;
height: 10px;
}

.showroom {
text-decoration: none;
display: block;
background: url(../img/navi1.gif) no-repeat;
width: 53px;
height: 11px;
float: right;
margin: 91px 15px 0 0;
}

.showroom:hover {
text-decoration: none;
display: block;
background: url(../img/navi1_h.gif) no-repeat;
width: 53px;
height: 101px;
float: right;
margin: 0 16px 0 0;
}

.korasu {
text-decoration: none;
display: block;
background: url(../img/navi2.gif) no-repeat;
width: 35px;
height: 11px;
float: right;
margin: 91px 14px 0 15px;
}

.korasu:hover {
text-decoration: none;
display: block;
background: url(../img/navi2_h.gif) no-repeat;
width: 51px;
height: 102px;
float: right;
margin: 0 13px 0 0;
}

.kontakt {
text-decoration: none;
display: block;
background: url(../img/navi3.gif) no-repeat;
width: 39px;
height: 11px;
float: right;
margin: 91px 0 0 15px;
}

.kontakt:hover {
text-decoration: none;
display: block;
background: url(../img/navi3_h.gif) no-repeat;
width: 53px;
height: 102px;
float: right;
margin: 0 0 0 1px;
}

Leider blick ich da noch nicht ganz durch. Die Punkte "web und logo" wollen sich einfach nicht verschieben lassen. Sie sind z.Z am äußersten Rand rechts oben vom <div class="top">. Ich hatte sie schon mit einem anderem Weg direkt unter den Button bekommen, jedoch gingen sie sofort wieder weg wenn die Maus den Button verlies.