Conflict with using ul inside a ul with the style sheet

Question

The only one problem is that when I hover the "Section" link, the list come as an inline display. I want it to come as a list i mean each link under the other. Only the Section's list. I tried this style sheet but it would'nt fit.

This is my html

<div class="nav">
  <ul class="navbar" >
    <li><a href="Home.aspx">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Sections</a>
        <ul class="SectionList">
          <li><a href="#">haha</a></li>
          <li><a href="#">haha</a></li>
          <li><a href="#">haha</a></li>
        </ul>
     </li>
     <li><a href="#">Appointment</a></li>
     <li><a href="Registeration.aspx">Registration</a></li>
  </ul>
</div>

and this is my style sheet

ul.navbar
{
  list-style-type:none;
  padding:6px 0 6px 0;
  margin:0;
}

ul.navbar li
{
  display:inline;
  float:left;
}

.SectionList
{
  display:none;
  padding: 0;
  margin: 0;
}

ul.SectionList li
{
  padding:0;
  margin:0;
}

.navbar li:hover .SectionList
{
  display:block;
}

Answer 1

See the fiddle for you desired output you need to work on its look and feel. http://jsfiddle.net/PthNP/

ul.navbar
{
list-style-type:none;
padding:6px 0 6px 0;
margin:0;

}

ul.navbar li
{
display:inline;
float:left;
}

.SectionList
{
display:none;
padding: 0;
margin: 0;
}

ul.SectionList li
{
padding:0;
margin:0;
}

.navbar li:hover .SectionList
{
display:block;
   width:50px;

}

.SectionList li
{
    width:100px;
    display:block;
}