Results 1 to 6 of 6

Thread: Help with drop "up" css menu

  1. #1
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with drop "up" css menu

    I'm trying to get the drop "up" menus on this page: http://sharonsayler.com/ to work and I'm missing something. My home menu css is:

    #home #access {
    float:left;
    display:block;
    margin: 0 auto;
    height:40px;
    width: 1000px;
    }
    #home #access {
    list-style: none;
    }
    #home #access ul {
    height:40px;
    margin: 0;
    background: #99C4DD;
    padding: 0 0 0 25px;

    }
    #home #access li {
    float:left;
    position: relative;
    height:40px;
    margin:0;
    text-align:center;
    padding-right:40px;
    }
    #home #access li a:hover,
    #home #access li.open,
    #home #access li.parent,
    #home #access li.active {
    color: #fff;

    }
    #home #access a {
    display:block;
    padding:0 10px;
    font-family: TeXGyreHerosRegular, Arial, Calibri, verdana, sans-serif;
    font-size:19px;font-size:1.9rem;
    line-height:36px;line-height:3.6rem;
    text-decoration:none;
    text-transform:lowercase;
    color:#17154C;
    font-weight: lighter;
    }
    #home #access > ul {
    position:relative;
    }
    #home #access ul ul {
    /*float:left;*/
    position:absolute;
    top:-130px;
    left:0;
    display:none;
    width:150px;
    padding:0;
    z-index: 99999;
    }
    #home #access ul.sub-menu li {
    float:none;
    height:auto;
    margin-left:0;
    padding:8px 5px 10px 10px;
    background-image:none;
    background-color:#99C4DD;
    border-top:1px solid #FFFFFF;
    text-align:left;

    }
    #home #access ul.sub-menu li.active,
    #home #access ul.sub-menu li:hover {
    background-color:#a4cfe9;
    color: #fff;
    }
    #home #access ul ul ul {
    top:0;
    }
    #home #access ul ul a {
    margin:0;
    padding:0;
    color:#17154C;
    line-height: 20px;
    font-size: 18px;
    ;
    }
    #home #access li:hover > a,
    #home #access ul ul:hover > a { }
    #home #access ul li:hover > ul {
    display:block;
    }

    The menu is a dropdown on all subpages, thus the "#home" in the css code above. I know I'm missing something simple, but my eyes are crossing trying to figure this out. Any help is greatly appreciated!!

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Im guessing you dont want some of them appearing where they are appearing now. i suggest changing the margin-bottom (or top), This might cause you to make each one a different id.
    I can be completely wrong with my idea but this is the reason why i think you might have to do that.
    Each one auto opens "down" automatically (top to bottom) unless you have a way to make it open from bottom to top then that is the only way to make you idea work (Remember i can be wrong here)

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default using firefox

    It looks/works good except two links have the drop "up" below the level of the menu( one -store-more so then the other-media room).

    Is that what you are talking about?


    Bud

  4. #4
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes...I need the sub-menus to pop "up" instead of "down". The big difference is rather than placing the 'top' of the sub list at a certain point, I need to place the 'bottom' of the sub-list at a certain point. That way it can expand height-wise.

  5. #5
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    I am trying to explain that xD
    You will have to give each one separate Id tags and in those id tag add "margin-top: ###"

  6. #6
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I see what you mean, Crazykld69. I'll try it. Thanks!!

Bookmarks

Posting Permissions

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