Question

I am trying to create a sidebar with categories for my website so when a user hovers over an item on the sidebar, an additional sub-menu opens up to the right, possibly even a sub-sub-menu. A perfect working example of what I am trying to create can be found on the top left of http://www.ebay.com.

My question is, what is the best way to go about creating this menu? Jquery? CSS/HTML only? Should I use UL + LI elements to create the menu or just divs like the ones below? I was thinking something along the lines of having a hiddin sub-menu div within the initial div that I would ‘show’ on hover, using JQuery, is that a pretty good solution?

I appreciate any suggestions or recommendations on a good way to do this.

<div id="container">
        <div class="menu-item">Cars > (Ford, Chevy, VW)</div>
        <div class="menu-item">Food > (Fruits, Burgers, Veggies)</div>
        <div class="menu-item">Sports > (Soccer, Football, Basketball)</div>
        <div class="menu-item">Movies > (Action, Comedy, Horror) </div>
    </div>

Answer 1

As far as I know this can be done with CSS only. The markup shoud look like:

<ul>
    <li>Cars
         <ul>
             <li>Ford</li>
             <li>Chevy</li>
             <li>VW</li>
         </ul>    
    </li>
    <li>Food
         <ul>
             <li>Fruits</li>
             <li>Burgers</li>
             <li>Veggies</li>
         </ul>    
    </li>
</ul>

You can find example CSS here: http://www.cssdrive.com/index.php/examples/exampleitem/css_drop_down_menu/