我用css做了一个下拉导航栏。但是希望菜单项上的字体大小与子菜单项不同。如果我能更改子菜单外观,更改框大小等,那也很好。我真的很迷茫,我能做的就是同时改变这两件事。
知道我可以对 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;
}
尝试
#navigation > ul > li > a {
font-size: 22px;
}
这只会更改顶部层次结构,这是主菜单中的所有链接。
下面是有关子选择器的详细信息:http://www.w3.org/TR/CSS2/selector.html#child-selectors