Dropdown navigation bar
Habe ich eine dropdown-Navigationsleiste mit css.
Aber eines wollen Sie die Schriftgröße auf die Menüpunkte anders zu sein, dann werden die Untermenüs Elemente.. Es wäre auch schön, wenn ich ändern könnte die Untermenüs Erscheinungsbild, ändern Sie das Feld Größe, etc.
Ich bin wirklich verloren, alles, was ich kann, ändere ich beide Dinge zur gleichen Zeit.
Irgendeine Idee was ich tun kann, um die css? 🙂
<div class="grid_7"id="navigation">
<ul>
<li>
<a href=""class="parent">Menu Item 1</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="">Menu Item 1</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="">Menu Item 1</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
</ul>
css:
#navigation
{
height:75px;
}
#utility
{
height:75px;
}
ul
{
font-family: Arial, Verdana;
margin: 0;
padding: 0;
}
ul li
{
display: block;
position: relative;
float: left;
font-size:16px;
}
li ul { display: none; }
#navigation ul
{margin:0px; padding:0px;}
ul li a
{
display:block;
text-decoration: none;
color: white;
padding: 20px 30px 20px 15px;
position:relative;
margin: 0;
}
ul li a:hover
{
background: #355F9E;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover a
{
background: #355F9E;
}
li:hover li a:hover
{
background: #BCCDD8;
}
- überprüfen Sie die links net.tutsplus.com/tutorials/html-css-techniques/... net.tutsplus.com/tutorials/html-css-techniques/...
InformationsquelleAutor Adnaves | 2012-05-15
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen
Dies wird sich erst ändern, die top-Hierarchie , die sind alle links im Hauptmenü.
Hier gibt ' s mehr infos über den child-Selektor:
http://www.w3.org/TR/CSS2/selector.html#child-selectors