Question

I’m trying to understand a bit more of some CSS coding. I’ve borrowed a navigation bar. The HTML code is like this:

      <ul>
        <li>
        <a href="">Business</a>
            <ul> 
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            </ul>
        </li>
    </ul>

The CSS:

   ul li 
   {
   display: block;
   position: relative;
   float: left;
   font-size:12px;
   top:15px;
   }

   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;
   }

   ul li a:hover 
   { 
   background: #F89623;
   }

   /*submenu position*/
   li:hover ul 
   {
   display:block;
   position:absolute;
   left: -30px;
   top:51px;
   }

   li:hover a 
   { 
   background: #F89623;
   }

   /*Background when you mouseover subitems*/
   li:hover li a:hover 
   { 
   background: #FFDEB0;
   }

   /*top nav only*/
  #navigation > ul > li > a {
  font-size: 16px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  }

I don’t understand some of the display tags. What does li ul { display: none; } do?

Also display: block; what does this do in my code (above)?

Answer 1

CSS display:none means hide element; display:block means show element.

Take a look at descendant selectors – http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

In your case,

 li ul { display: none; }

means that those ULs that are descendants of LIs will not be shown (display:none vs. display:block);

In other words,

<ul id='parentUL'>
   <li id='childLI'>
      <ul id='childUL'>
      </ul>
   </li>
</ul>

childUL will not be shown based on this CSS.