SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu hiding behind content

    Hi all, I'm having a problem with my new dropdown menu bar, i tried hard to figure out the problem but cannot seem to find a solution.

    Here is the code for the dropdown menu bar

    HTML Code:
    #nav,#nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #nav {
        background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
        clear: both;
        font-size: 12px;
        height: 58px;
        padding: 0 0 0 9px;
        position: relative;
        width: 957px;
    }
    #nav ul {
        background-color: #222;
        border:1px solid #222;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        left: -9999px;
        overflow: hidden;
        position: absolute;
        top: -9999px;
        z-index: 2;
    
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    
        -moz-transition: -moz-transform 0.1s linear;
        -ms-transition: -ms-transform 0.1s linear;
        -o-transition: -o-transform 0.1s linear;
        -webkit-transition: -webkit-transform 0.1s linear;
        transition: transform 0.1s linear;
    }
    #nav li {
        background: url('menu_line.png') no-repeat scroll right 5px transparent;
        float: left;
        position: relative;
    }
    #nav li a {
        color: #FFFFFF;
        display: block;
        float: left;
        font-weight: normal;
        height: 30px;
        padding: 23px 20px 0;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000000;
    }
    #nav li:hover > a {
        color: #00B4FF;
    }
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
        background: none repeat scroll 0 0 #121212;
        outline: 0 none;
    }
    #nav li:hover ul.subs {
        left: 0;
        top: 53px;
        width: 180px;
    
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    #nav ul li {
        background: none;
        width: 100%;
    }
    #nav ul li a {
        float: none;
    }
    #nav ul li:hover > a {
        background-color: #121212;
        color: #00B4FF;
    }
    #lavalamp {
        background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
        height: 16px;
        left: 13px;
        position: absolute;
        top: 0px;
        width: 64px;
    
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    #lavalamp:hover {
        -moz-transition-duration: 3000s;
        -ms-transition-duration: 3000s;
        -o-transition-duration: 3000s;
        -webkit-transition-duration: 3000s;
        transition-duration: 3000s;
    }
    #nav li:nth-of-type(1):hover ~ #lavalamp {
        left: 13px;
    }
    #nav li:nth-of-type(2):hover ~ #lavalamp {
        left: 90px;
    }
    #nav li:nth-of-type(3):hover ~ #lavalamp {
        left: 170px;
    }
    #nav li:nth-of-type(4):hover ~ #lavalamp {
        left: 250px;
    }
    #nav li:nth-of-type(5):hover ~ #lavalamp {
        left: 330px;
    }
    #nav li:nth-of-type(6):hover ~ #lavalamp {
        left: 410px;
    }
    #nav li:nth-of-type(7):hover ~ #lavalamp {
        left: 490px;
    }
    #nav li:nth-of-type(8):hover ~ #lavalamp {
        left: 565px;
    }
    Live demo for it

    http://www.script-tutorials.com/demos/249/index.html



    But on my site, the sub menus have been hidden.



    My site: http://thegioidulieu.blogspot.com/

    Thank you in advande for your advice!
    Attached Images Attached Images

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Please give the following a try:

    Line 270
    Code:
    .tabs-outer {
        background: url("//www.blogblog.com/1kt/inc/tabs_gradient_light.png") repeat scroll 0 0 #FCFBF5;
        overflow: hidden;    /* this is preventing dropdowns from showing */
        position: relative;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi takeover4444. Welcome to the forums.

    As ronpat points out, having overflow: hidden is a killer for a dropdown menu. You have it in a few other places, too, that will cause problems. E.g. you need to remeove it from the css 2 bundle CSS file a couple of times. E.g.

    Code:
    .tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    }
    Also, keep <style> links out of your <body> area. Place them in your <head>, or better still, keep the styles in a style sheet. Having styles embedded just above the menu is poor practice.

  4. #4
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, by just doing it, the problem solved, Thanks for the advice you gave me, thanks.

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Also, keep <style> links out of your <body> area. Place them in your <head>, or better still, keep the styles in a style sheet. Having styles embedded just above the menu is poor practice.
    Thanks, i'll do it


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
  •