XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Dropdown Navigations (http://xhtmlforum.de/showthread.php?t=68215)

Cueball 04.10.2012 03:51

CSS Dropdown Navigations
 
Hey Leute,

also kurz zu meinen skills in sachen css und html. Bin in der hinsicht ein blutiger anfänger das was ich weiß habe ich mir selber zusammengelesen aus verschiedenen büchern und foren und habe auch versucht nur das umzusetzen was ich verstehe. Doch jetzt habe ich ein großes problem wo ich schon mehrere Tage dran sitze. Ich möchte gerne ein dropdown menü über css laufen lassen aber natürlich später mit jquery (das soll aber wirklich erst später sein will erstmal das grundgerüst für css haben). Ich habe jetzt mehrere codes ausprobiert und im Internet recherchiert, doch das Problem das ich habe ich bekomme keinen Hover effekt rein, sprich das das menü erst aufklappt wenn ich mit der maus über das hauptmenü gleite.

Bei dem ganzen handelt es sich hier um eine horizontale navigation.

Ich hoffe ihr könnt mir schnell weiter helfen.

HTML Code:


<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gilde</a>
<ul id="subnav-2">

<li><a href="/tools/csstabs/2">People</a></li>
<li><a href="/tools/csstabs/2">Careers</a></li>
<li><a href="/tools/csstabs/2">Press</a></li>
</ul></li>
<li><a href="#">Bewerbung</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>
</div><!-- END #nav -->

CSS Code:


div#navi
{
font-size: 0.9em;
font-weight: bold;
padding: 40px 0px;
}

div#navi ul
{
list-style-type: none;
}

div#navi li
{
float: left;
margin-left: 5px;
}

div#navi a
{
display: block;
padding: 5px;
width: 130px;
height: 50px;
background-image: url(images/button2.png);
background-size:650px auto;
-webkit-background-size: 140px auto;
color: #68228B;
text-decoration: none;
text-align:center;
vertical-align:middle;
display:table-cell;
}

div#navi a:visited
{
color: #F00;
}

div#navi a:hover
{
color: #8B0000;
background-image: url(images/button);
}


div#navi #subnav-1:hover,
div#navi #subnav-2:hover,
div#navi #subnav-3:hover,
div#navi #subnav-4:hover {
display : inline;
width: 90%;
}

MrMurphy 04.10.2012 06:42

Hallo,

so kann das nicht funktionieren, es fehlt z. B. das gesamte html-Gerüst.

Ergänze bitte den fehlenden Teil und stell' die gesamte Seite online, dann kann dir am besten geholfen werden.

Grundlegende Informtionen und praktische Beispiele zur horizontalen Navigation findest du z. B. unter

http://de.selfhtml.org/css/layouts/n...onsleisten.htm

Gruss

MrMurphy


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

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

© Dirk H. 2003 - 2023