No replies
foucquet
foucquet's picture
Offline
newbie
Last seen: 11 years 37 weeks ago
Joined: 2011-03-14
Posts: 1
Points: 2

I am creating an unordered list dropdown/flyout menu which works fine with Parent and Child lists, but when I add a grandchild li it places it over the Child list, and I cant for the life of me work out how to move it to the right side of the Child list. I know that the solution will be quite simple, and that I will be tearing my hair out with disgust when I see it.

The Markup:-

    <ul>
 
      <li>Parent 1
        <ul>
          <li><a href="#">Child 1</a></li>
                <ul>
                    <li><a href="#">Grandchild 1</a></li>
                </ul>
          <li><a href="#">Child 2</a></li>
          <li><a href="#">Child 3</a></li>
          <li><a href="#">Child 4</a></li>
       </ul>
      </li>
 
      <li>Parent 2
        <ul>
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
          <li><a href="#">Child 3</a></li>
        </ul>
      </li>
 
      <li>Parent 3
        <ul>
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
          <li><a href="#">Child 3</a></li>
          <li><a href="#">Child 4</a></li>
          <li><a href="#">Child 5</a></li>
        </ul>
      </li>
 
    </ul>

The CSS (so far):-

    body
        {
          behavior: url("csshover3.htc");
        }
 
    /* List Styles */
 
    ul
        {
          padding 0;
          margin: 0;
          list-style: none;
        }
 
    li
        {
          float: left;
          position: relative;
          width: 10em;
        }
 
    li ul
        {
          display: none;
          position: absolute;
          top: 1em;
          left: 0;
        }
 
    li > ul
        {
          top: auto;
          left: auto;
        }
 
    li:hover ul
        {
          display: block;
        }

Now I know that I need to add to the CSS, but can't work out what - and all of the discussions I have found online are about as clear as mud...