SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  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


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
  •