SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    hidden navigation menu

    on this site when you hover over Practice Areas link in the top nav bar, why is the list hidden behind the orange area and how to i get it to appear in front?

    please advise. thanks in advance.

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The overflow:hidden on #container div.topnavwrapper is snipping off the dropdown menu.

    To overcome this you could use position:absolute; and right:0; on #header-right. To provide the correct context for the positioning, position:relative; would need to be added to #container div.topnavwrapper.

    Code:
    #header-right {
    float: right;
    padding-top: 25px;
    position: absolute;
    right: 0;
    }
    
    #container div.topnavwrapper {
    margin: 0 auto;
    text-align: left;
    width: 1000px;
    overflow: hidden;
    position: relative;
    }

  3. #3
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i have that code in there now but it doesnt seem to be working please advise.

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Sorry, my error. I'll have to come back to you on this.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    An alternative would be to use a "clearfix" solution instead of overflow: hidden. So, remove overflow: hidden from here:

    Code:
    #container div.topnavwrapper {
      margin: 0 auto;
      text-align: left;
      width: 1000px;
      overflow: hidden;
      position: relative;
    }
    and add this code instead:

    Code:
    .topnavwrapper:after {
      content:"";
      display:table;
    }
    
    .topnavwrapper:after {
      clear:both;
    }

  6. #6
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    that worked. thank you!


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
  •