Question

I have looked around and have yet to find a solution to this problem. I have a list menu with markup like so

<div id="menu">
  <ul>
    <li>Category #1
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #2
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #3
      <ul>

        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #4
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
  </ul>
</div>

What I am trying to do is make it so that the menu is entirely horizontal, when you hover over a category it will slide out the Items next to it.
Visual example here

Its quite important that it is built on a structured list and as I said as far as I can tell, none of the accordions I have checked so far support this feature.
Any idea’s?

Answer 1

Are there links in the lite items? If so, you could try something like this:

li ul {
    display:none;
}
li, ul, a {
    float:left;
    margin:0;
    padding:0;
    outline:1px solid;
}
li:hover ul {
    display:block;
}

This does not include the “slide out” functionality, but shows that you will probably need a separate element around the text just before each nested ul. (The overall styling here is of course just proof of concept, feel free to skip the outline e.g. 😉