Forums

Give help. Get 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 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 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 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 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 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 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

    # 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

    # 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 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag