[英]Dropdown navigation bar
我用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.