我用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;
}