CODEWITHSUNDEEP
htmlcsshtml-listsstylesheet
7alhashmi
7alhashmi

Reputation: 924

Conflict with using ul inside a ul with the style sheet

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

Upvotes: 1

Views: 807

Answers (2)

sdjuan
sdjuan

Reputation: 719

Inspection with firebug showed that this: 

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

was applying 

display:inline

to all descendents. To fix, change that to:

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

which will select only the first descendent. Here is a CSS reference.

Also you might get some good ideas from GRC pure CSS menus so you don't have to completely re-invent the wheel. Good luck.

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

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

Upvotes: 1

Related Questions