The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

How to create drop down menu with table, td, td.

  • # February 5, 2009 at 3:38 am

    How to create drop down menu with table, td, td.

    i have to do this for this site

    it’s table based site ,navigation bar made by table.

    pls help ASAP

    # February 5, 2009 at 3:53 am

    firstly I wouldnt use the table – I would use a UL.

    Is it for the navigation? Coz you can get some good free CSS menu templates for free… here is a good tutorial.

    # February 5, 2009 at 5:41 am

    i know very well how to make menu with css and ul li . but this clients only needs to add a submenu. so i want to know how we can make a dropdown menu with table, tr, td and images


    this is the code of menu. there is no sub-menu yet. i want to add a sub-menu in any link.

    is there any solution with javascript or something else ?

    if there is no solution then i will recreat the whole in css, ul,li

    # February 5, 2009 at 1:12 pm

    If you know very well how to make it with ul / li, then why wouldn’t you? I see absolutely no benefit to using a table for this.

    # February 5, 2009 at 11:26 pm

    because i don’t want to recreate the menu. because it’s a huge site with many pages and client just need a 1 submenu in the main menu . this is a little work for me and i don’t want to waste much time on that. i need a quick solution

    This is navigation

    This is the code of navigation made by table


    I want this . i want to show a sub-menu under products menu item anyhow except converting into any css menu

    Please help ASAP

    # November 12, 2009 at 11:08 pm

    I am also looking to add a submenu only to an existing menu for main page at Did you ever figure out a solution to this? I’m using basic html with js.

    # November 13, 2009 at 5:01 pm

    What I would try doing is this.

    The <td> that holds the link you want to be a dropdown give it an ID or class of "dropdown"

    Next add an UL inside the td tag
    <td class="dropdown">
    <a>Main Link</a>

    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>


    /* CSS /*
    .dropdown ul {display:none}
    .dropdown:hover ul {display:block;}

    From there on you will need to position your UL using relative positioning. Also you will need a fix for IE6 because it doesn’t like :hovers except on a tags. But there are workarounds like

    I hope this helps. If not. You could always use javascript to throw something up on hover.

    # October 28, 2014 at 9:51 am

    @ywn1997, the last post in this discussion was almost five years ago. The topic is dead, and I seriously doubt that the OP is still looking for a “quick solution.”

    Please, pay attention to dates and don’t dredge up very old discussions.

    In general, if a thread is more than six months old, you should not post in it without a very, very, very good reason.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘How to create drop down menu with table, td, td.’ is closed to new replies.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed