CODEWITHSUNDEEP
htmlcssnavigationdrop-down-menunavigationbar
user1379533
user1379533

Reputation:

Dropdown navigation bar

I've made a dropdown navigation bar with css. But a want the font size on the menu items to be different then the submenues items.. It would also be nice if i could change the submenues apperances, change the box size etc. I'm really lost, all I can do i change both things at the same time.

Any idea what I can do to the 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;
   }

Upvotes: 0

Views: 10810

Answers (1)

allaire
allaire

Reputation: 6045

Try

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

This will only change the top hierarchy , which are all the links in the main menu.

Here's more infos about the child selector: http://www.w3.org/TR/CSS2/selector.html#child-selectors

Upvotes: 4

Related Questions