No replies
olwe
olwe's picture
Offline
newbie
Last seen: 9 years 10 weeks ago
Timezone: GMT-5
Joined: 2010-09-15
Posts: 2
Points: 4

I've seen many tips that hit around my issue, but nothing exact....

I would like to be able to nest a "vertical" list in a horizontal. Technically, I can, but the positioning is terrible. Here's my html code:

<body>
    <ul class="mainlist">
      <li>First in mainlist.</li>
      <li>
        <ul class="horizontallist">
          <li>First in horizontallist</li>
          <li>
            <ul class="secondlist">
              <li>First in second vertical list.</li>
              <li>Second in second vertical list.</li>
              <li>Third in second vertical list.</li>
            </ul>
          </li>
          <li>Second in horizontal list.<br /><br /><br />With extra text.</li>
          <li>Third in horizontal list.</li>
        </ul>
      </li>
      <li>Part of Mainlist</li>
    </ul>
  </body>

Here's the CSS:

ul.mainlist
{
  list-style-type:none;
  margin: 0px;
  }
 
.mainlist li
{
  margin:0px;
  padding:0px;
  display:block;
  }
 
ul.horizontallist
{
  list-style-type:none;
  margin: 0px;
  padding:0px;
  }
 
.horizontallist li
{
  margin:0px;
  padding:0px;
  display: inline-block;
  }
 
ul.secondlist
{
  list-style-type:none;
  margin: 0px;
  padding:0px;
  }
 
.secondlist li
{
  margin:0px;
  padding:0px;
  display:block;
  }

My main problem is getting some sort of position stability, i.e., can the secondlist be flush at the top? I'd like to get all the horizontallist items to be flush at the top, also.