CSS 以特殊格式显示 li

Question

如果我有一个包含

的Ul

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

我需要在 block 中显示没有 child 的 li，我需要在它旁边内联显示有 child 的 li，而不是在它下面任何想法

我需要:

         Link1      Navigation
         Link2        Navigation1    Navigation4
         Link3        Navigation2    Navigation5
                      Navigation3

Answer 1

类似于 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>