Horizontal Dropdown Menu Model

  • epak

    (@epak)


    15 years, 4 months ago

    Please see the web site “http//www.gifts.com

    On the mouseover of the horizontal menu you will see the dropdown menu showing “Search by Occasion,” “Top Categories,” and “Shop by Price.” (each with 2 columns in the viewing area.)

    The question is, “How can I create a similar menu? (One with 2 columns of links rather than 1 column (as it is now) that expands beyond the vertical viewing area thus making it difficult to see all of the possible selections under that heading options. This will give me more space and make the horizontal menu easier for visitors to navigate.

    Thanks in advance for pointing me in the right direction.

    epak

Viewing 2 replies - 1 through 2 (of 2 total)
  • stvwlf

    (@stvwlf)

    15 years, 4 months ago

    This is done using CSS. You assign a width to the LI list items on the dropdown menu that is less than half the width of the container UL that holds the LI’s. You float the LI’s left. Since two of them will fit in one row, the natural behavior of floated list items is to display side by side. When they run out of room (after two have displayed) they start displaying at the left side of the next row.

    Its a little tricky to set up if you are not very familiar with CSS (as are drop down menus). Google for something like “two column drop down menu” and you will find some articles on the technique.

    Thread Starter epak

    (@epak)

    15 years, 4 months ago

    Thanks stvwlf. I’ll give that a shot and let you know. Again, thanks for the quick reply.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Horizontal Dropdown Menu Model’ is closed to new replies.