Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.10.2012, 03:51
Cueball Cueball ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2012
Beiträge: 3
Cueball befindet sich auf einem aufstrebenden Ast
Standard 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%;
}
Mit Zitat antworten
Sponsored Links