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 に答える