Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pure CSS horizontal menu not working

    hi, I made this website,

    student.seas.gwu.edu/~ottobahn/test.html


    I am trying to make the navigation menu work. The parent menu and submenu works as intended but when I slide my cursor to the submenu they disappear. I believe it has to do with how much space is between parent menu and the submenu. with smaller spacing the menu works but they look attached and weird. I would like to keep the current spacing but make the submenu work.

    if pure css solutions do not let me keep the spacing, I think I need to use a javascript approach instead.

    I know im not supposed to use tables for layouts. but I made the bulk of my website using this method. if any of you would like to show me how I can do it with div tags it would be much appreciated as well.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    when i hover my mouse over COURSE & Products, then i m able to view the submenu in IE7 and Firefox 3.5

    which browser are you testing.

    vineet

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    only the course and products have sub menus.
    they appear fine but when I try to select things on the sub menu I am unable to do it. the submenu under course and products disappear as soon as move my cursor away from the parent menu eg course and products.

    im viewing it through safari 4 and firefox.

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    replace this in your css.

    Code:
    #navigation li ul
    {margin:0px; padding:8px 8px 0px 0px; display:none; position:absolute; margin-left: 20px; left:-110px; top:20px;}
    vineet

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #navigation li ul {/*test.html (line 82)*/
    display:none;
    left:-110px;
    line-height:32px;
    margin:0 0 0 20px;
    padding:0;
    position:absolute;
    top:20px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    #navigation li ul {/*test.html (line 82)*/
    display:none;
    left:-110px;
    line-height:32px;
    margin:0 0 0 20px;
    padding:0;
    position:absolute;
    top:20px;
    }
    I love you abduraooft. thank you for your help. is there anway I can center the submenu around the parent menu. for example, the width of the submenu's center is located at the center of "product" so they would align itself vertically along the center of both.

    also I am having trouble aligning the parent menu to the very right edge of my design. its got a little space on the right of "contact us" and its annoying. do you have any ideas? I tried putting align: center; but that does not seem to effect it.

    I dont want you guys to hold my hand and just give me solutions. if there are tutorials or links I can study up on, it would be awesome as well. i learned the "line-height" command extends the hover areas. thats what I needed! just one line modification!

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in case anybody was trying to help me still.
    i redid the whole thing using DIV tags


    student.seas.gwu.edu/~ottobahn/test2.html


    I am faking the way the navigation is aligned to the right edge. does anybody know how I can align <div id="navigation"> to the right edge of my website?

    also I cannot align the submenu and the parent menu along their center line. how would I go about doing that?!

    HELP IS MUCH APPRECIATED. We'll give you discounts if you live on Guam and would like a great spa treatment!!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I am faking the way the navigation is aligned to the right edge. does anybody know how I can align <div id="navigation"> to the right edge of my website?
    Code:
    #navigation {/*test2.html (line 36)*/
    font-family:Georgia,"Times New Roman",Times,serif;
    font-size:20px;
    padding:0;
    position:absolute;
    right:0;
    top:55px;
    /*width:595px;*/
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you time and time again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •