0

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

1 回答 1

4

尝试

#navigation > ul > li > a {
    font-size: 22px;
}

这只会更改顶层层级,即主菜单中的所有链接。

以下是有关子选择器的更多信息:http: //www.w3.org/TR/CSS2/selector.html#child-selectors

于 2012-05-15T13:34:35.083 回答