Grow your CSS skills. Land your dream job.

CSS Horizontal sub menu help

  • # November 24, 2008 at 7:55 pm

    I need help with this menu. I’m very new to css. What I’m trying to do is create a horizontal menu with sub menus that are horizontal too. Able to do it with the Home tab, but whenever I try to add the horizontal sub menu’s for the other items I can’t get it to work…Under major pressure to get this done in the next couple of days. Can someone help me on what I’m doing wrong.

    Thanks, here is the code:

    <div id="navigation">
    <ul class="mainMenu">
    <li><a href="#" class="selectMenu">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Voice</a></li>
    <li><a href="#">Internet</a></li>
    <li><a href="#">Assistance</a></li>
    <li><a href="#">Links &amp; News</a></li>
    <li class="noBg"><a href="#">Contact</a></li>
    </ul>
    <a href="#" class="signup"></a>
    <br class="spacer" />
    <ul class="subNav">
    <li class="noBg"><a href="#">Our Benefits</a></li>
    <li><a href="#">What Our Future Plans</a></li>
    <li><a href="#">Our Success</a></li>
    <li><a href="#">Ratings</a></li>
    <li><a href="#">Latest Blogs</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Comments</a></li>
    </ul>
    <br class="spacer" />
    </div>

    # November 25, 2008 at 10:53 am

    What CSS have you got for that?

    # November 25, 2008 at 12:06 pm

    oops….here it is. I inherited this and don’t know how to get it to function properly. Like I said, I know how to work with CSS just a bit :)

    div#navigation-bg{
    height:66px; background:url(images/navigation-bg.gif) 0 0 repeat-x;
    }
    div#navigation-bg div#navigation{
    width:922px; margin:0 auto;
    }
    div#navigation-bg div#navigation ul.mainMenu{
    padding:0; float:left; width:567px;
    }
    div#navigation-bg div#navigation ul.mainMenu li{
    width:81px; float:left;
    background:url(images/navigation-divider.gif) 100% 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.mainMenu li a{
    width:80px; height:33px; display:block;
    line-height:33px; text-align:center;
    font-weight:bold; color:#FAF0C2; font-size:11px;
    }
    div#navigation-bg div#navigation ul.mainMenu li a:hover{
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.mainMenu li a.selectMenu{
    width:80px; height:33px; display:block;
    line-height:33px; text-align:center;
    font-weight:bold; color:#FAF0C2; font-size:11px;
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }

    /*


    DROP DOWN MENU STARTS


    */
    ul.subNav{
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
    }
    ul.subNav li{
    background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
    height:17px; float:left; padding:6px 0 0 0;
    }
    ul.subNav li a{
    display:block; margin:0 22px 0 20px;
    color:#84915D;
    }
    ul.subNav li a:hover{
    color:#fff;
    }
    /*


    DROP DOWN MENU ENDS


    */

    div#navigation-bg div#navigation a.signup{
    width:71px; height:28px; display:block;
    background:url(images/sign-up-btn.gif) 0 0 no-repeat;
    margin:2px 0 0 0; float:right;
    }
    div#navigation-bg div#navigation a.signup:hover{
    background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;

    # November 25, 2008 at 6:50 pm

    I’m not sure if you just didn’t include it, but in the code you posted you didn’t include the container, and because of the way the CSS is coded it needs to be in the correct hierarchy.

    Here is my edited version of the HTML:

    As for the CSS, I added "list-style: none" to your unordered lists. I also added the spacer class you called in your <br> tag because it won’t display properly otherwise, that’s all though and it worked for me.

    Code:
    div#navigation-bg {
    height:66px;
    background: url(images/navigation-bg.gif) 0 0 repeat-x;
    }
    div#navigation-bg div#navigation {
    width:922px;
    margin:0 auto;
    }
    div#navigation-bg div#navigation ul.mainMenu {
    padding:0;
    float:left;
    width:567px;
    list-style: none;
    }
    div#navigation-bg div#navigation ul.mainMenu li {
    width:81px;
    float:left;
    background:url(images/navigation-divider.gif) 100% 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.mainMenu li a {
    width:80px;
    height:33px;
    display:block;
    line-height:33px;
    text-align:center;
    font-weight:bold;
    color:#FAF0C2;
    font-size:11px;
    }
    div#navigation-bg div#navigation ul.mainMenu li a:hover {
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.mainMenu li a.selectMenu {
    width:80px;
    height:33px;
    display:block;
    line-height:33px;
    text-align:center;
    font-weight:bold;
    color:#FAF0C2;
    font-size:11px;
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }
    .spacer {
    clear: both;
    overflow: auto;
    }
    /*————————– DROP DOWN MENU STARTS ————————–*/
    ul.subNav {
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
    list-style: none;
    }
    ul.subNav li {
    background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
    height:17px;
    float:left;
    padding:6px 0 0 0;
    }
    ul.subNav li a {
    display:block;
    margin:0 22px 0 20px;
    color:#84915D;
    }
    ul.subNav li a:hover {
    color:#fff;
    }
    /*————————– DROP DOWN MENU ENDS ————————–*/

    div#navigation-bg div#navigation a.signup {
    width:71px;
    height:28px;
    display:block;
    background:url(images/sign-up-btn.gif) 0 0 no-repeat;
    margin:2px 0 0 0;
    float:right;
    }
    div#navigation-bg div#navigation a.signup:hover {
    background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
    }

    Is that what you wanted? or have I mis-understood?

    # November 26, 2008 at 1:43 pm

    Nothing changed for me with the code you did :( Do you see how on Home there are submenus of Our Benefits, What Our Future Plans, etc? I need to add submenus that drop down when you hover over them like home for the other Main Menu items. For example, on About when you hover over it, a submenu will drop down with About Us, Affiliates, Newsletter, Serving Area, etc

    For some dang reason, I can not get these to work….Where in the code did you add the container? I don’t see it

    Thanks for all of your help with us newbies. :)

    # November 26, 2008 at 3:03 pm

    Ah I do apologise, I thought you mean you just wanted it ina horizontal list.

    Might be worth checking this out:

    http://www.dhtmlgoodies.com/index.html?page=menuScripts

    Check out "List based DHTML menu"

    And with regards to the container, the very top tag.

    # November 26, 2008 at 5:10 pm

    Thanks for the link….seriously going to pull my hair out. Went and looked at and downloaded the Tab Menu. I really have no clue what I’m doing, nothing is working for me…..grrrrrr. Tried manipulating that code to the design and feel that I want and then as soon as I do that, it totally wacks the entire nav bar up. Totally brain fried. How can I beg someone to right this for me :)

    # November 26, 2008 at 6:31 pm

    What design do you want exactly?
    Can you send me a screenshot or something showing me?

    I’ll see if I can change the tab menu to what you want if I get time tomorrow.

    # November 26, 2008 at 8:05 pm

    That would be great :)

    Won’t let me upload a screenshot…grrr, tells me could not upload. Tried to send you a private message but that wouldn’t work either. :evil:

    Hate to post my email…I’ve gotten lots of junk from doing that. I’ll log back on in a bit and see what you suggest.

    Thanks again

    Written before I realized screenshot wouldn’t work.
    As you see from the screenshot, the submenu is there for HOME but never leaves after you move your mouse away or hover over something else. I want to add submenus for each of the Main menu items so when you hover over each one, a different submenu will appear.

    Wow you would be so awesome if you can do this. I don’t know what I’m doing wrong…think I get it and then I mess something else up completely.

    # November 26, 2008 at 9:37 pm

    http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

    this example of a dropdown menu is from a links of interest earlier this year on this site, take a look at it,
    I am using it on a web site I have

    for other examples, do a google search on "dropdown menu", there is lots of info out there

    Al

    # November 26, 2008 at 10:28 pm

    I’ll check that site out….problem I’ve found on doing a google search is I haven’t found one that shows exactly what I want…I want submenu to drop down horizontally not vertically.

    Thanks

    # November 27, 2008 at 6:07 am

    http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html

    That is an example of what al_m473 suggested. Is that what you want?

    # November 27, 2008 at 12:10 pm

    Sort of….but I want the drop down to go horizontal not straight down. Does that make sense?

    Wish I could post the screenshot…won’t let me grrr. When I try,, I get this error: Could not upload attachment to ./files/938_4f99751a61d371bc1a6cce9d9e579f69.

    # November 27, 2008 at 1:22 pm

    Yes….like that…that’s the one I tried to use and manipulate but I kept doing something wrong and couldn’t get it to work with what I’ve already got setup in my css stylesheet

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

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