CODEWITHSUNDEEP
css
sally
sally

Reputation: 73

CSS display li in special format

If I have an Ul that contains 

          <UL class="level2">
  <li> 
     <a>Link1</a>  
  </li>
  <li> 
   <a> Link2</a> 
 </li>
  <li> 
  <a> Link 3</a> 
 </li>

  <li class="hasChildren">
     <a>Navigation</a>
     <ul>
        <li>Navigation 1 </li>
         <li>Navigation 2</li>
         <li>Navigation 3 </li>
         <li>Navigation 4</li>
         <li>Navigation 5</li>
     </ul>
 </li>

I need to display the li that don't have children in block and I need the li that haschildren to be displayed inline next to it not under it any idea

I need to have :

         Link1      Navigation
         Link2        Navigation1    Navigation4
         Link3        Navigation2    Navigation5
                      Navigation3

Upvotes: 0

Views: 118

Answers (1)

spliter
spliter

Reputation: 12579

Something like this?

CSS:

ul {
    width:  600px;
    position: relative;
    margin: 0;
    padding: 0;
}
li {
    display:  block;
    width: 300px;
    background: Red;

}
li.hasChildren {
    position: absolute;
    top: 0;
    right: 0;
    background:  Green;     
}
li.hasChildren ul {
    width: auto;
    margin: 0;
    padding: 0;
}
li.hasChildren ul li {
    background:  Green; 
}

HTML:

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li class="hasChildren">
        Item #3
        <ul>
            <li>Sub-item #1</li>
            <li>Sub-item #2</li>
        </ul>
    </li>
    <li>Item #4</li>
    <li>Item #5</li>
</ul>

Upvotes: 2

Related Questions