下拉导航栏



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

相关内容

  • 没有找到相关文章

最新更新