Grow your CSS skills. Land your dream job.

CSS Horizontal sub menu help

  • # November 28, 2008 at 5:42 pm

    Ok Al try this:

    In between your <head> tags put this:

    Code:

    And where you want your menu to appear, put this:

    That should do the trick.

    When you are happy with it, you can put everything in seperate files :)

    # November 28, 2008 at 5:44 pm

    Incase it isn’t obvious, alter this:

    <div id="mainMenu">
    <a>Home</a>
    <a>About</a>
    <a>Voice</a>
    <a>Internet</a>
    <a>Assistance</a>
    <a>Links &amp; News</a>
    <a>Contact</a>
    </div>

    To include whatever you want your top level menu items to be. For each of those there needs to be a seperate sub menu, alter what appears in the sub menus by editing this:

    <div id="submenu_1">
    <a href="#">Product 1</a>
    <a href="#">Product 2</a>
    <a href="#">Product 3</a>
    </div>

    # November 28, 2008 at 7:52 pm

    Thanks Mike

    I’ll try this out on Monday when I get back in the office :)

    # December 1, 2008 at 12:39 pm

    Tested it out…VERY close, this is about as far as I got as well. The problem being, as soon as I put the information where I want the menu to appear, it’s overwriting what I’ve stated it to appear like. It’s looking just like the one from dhtmlgoodies.com My images, fonts, colors, etc are not used :?: How can I redirect it to look at the css it should be

    # December 1, 2008 at 6:10 pm

    You need to go through the CSS from DHTML goodies that I posted, and change that to match your own styles.

    # June 3, 2013 at 12:04 pm

    Holy moly Mike, you went through a lot of work to make this happen. Kudos to you! Also, thanks to everyone for posting those resources. Im trying to make a horizontal sub-menu too, and these resources were great!

    # June 3, 2013 at 12:06 pm

    Please, use CodePen or JSFiddle for reduced test cases.

    # June 3, 2013 at 12:12 pm

    CodePen didn’t exist 5 years ago

    # June 3, 2013 at 12:14 pm

    Oh, waw. I should definitely pay more attention to post date. :)

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".