SitePoint Sponsor

User Tag List

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

    Css drop down menu

    My CSS drop down menu is hidden ... Help me !!! ( this is the blog : suntadolescent-antidrog.blogspot.com)

    Help ! Thank you!

    css :

    Code CSS:
    #MBT-Container {
        font: normal 1em Arial, Helvetica, sans-serif;
         width:100%; float:left;   
    }
    a {
        color: #333;
    }
    #nav {
        margin: 0;
        padding: 7px 6px 0;
        background: #0080ff url([url]http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png[/url]) repeat-x 0 -110px;
        line-height: 100%;
        border-radius: 2em;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    }
    #nav li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none; }
     
    /* main level link */
    #nav a {
        font-weight: bold;
        color: #e7e5e5;
        text-decoration: none;
        display:block;
        padding:  8px 20px;
        margin: 0;
        -webkit-border-radius: 1.6em;
        -moz-border-radius: 1.6em;
     
        text-shadow: 0 1px 1px rgba(0,0,0, .3);
    }
    #nav a:hover {
        background: #000;
        color: #fff;
    }
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
        background: #666 url([url]http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png[/url]) repeat-x 0 -40px;
        color: #444;
        border-top: solid 1px #f8f8f8;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        box-shadow: 0 1px 1px rgba(0,0,0, .2);
        text-shadow: 0 1px 0 rgba(255,255,255, 1);
    }
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color: #666;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #nav ul a:hover {
        background: #0080ff url([url]http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png[/url]) repeat-x 0 -100px !important;
        color: #fff !important;
    text-align:left;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }
    /* dropdown */
    #nav li:hover > ul {
        display: block;
    }
    /* level 2 list */
    #nav ul {
        display: none;
    text-align:left;
        margin: 0;
        padding: 0;
        width: 185px;
        position: absolute;
        top: 35px;
        left: 0;
        background: #ddd url([url]http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png[/url]) repeat-x 0 0;
        border: solid 1px #b4b4b4;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    #nav ul li {
        float: none;
        margin: 0;
        padding: 0;
    }
    #nav ul a {
        font-weight: normal;
        text-shadow: 0 1px 0 #fff;
    }
    /* level 3+ list */
    #nav ul ul {
        left: 181px;
        top: -3px;
    }
    /* rounded corners of first and last link */
    #nav ul li:first-child > a {
        -webkit-border-top-left-radius: 9px;
        -moz-border-radius-topleft: 9px;
        -webkit-border-top-right-radius: 9px;
        -moz-border-radius-topright: 9px;
    }
    #nav ul li:last-child > a {
        -webkit-border-bottom-left-radius: 9px;
        -moz-border-radius-bottomleft: 9px;
        -webkit-border-bottom-right-radius: 9px;
        -moz-border-radius-bottomright: 9px;
    }
    /* clearfix */
    #nav:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    #nav {
        display: inline-block;
    }


    Code:
    <div id="MBT-Container">
    <ul id="nav">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Blogger Tricks</a>
    <ul>
    <li><a href="#">Sub-Row</a>
    <ul>
    <li><a href="#">Sub Sub-Row 1
    <li><a href="#">Sub Sub-Row 1</a></li>
    <li><a href="#">Sub Sub-Row 1</a></li>
    <li><a href="#">Sub Sub-Row 1</a></li>
    </a></li></ul>
    </li>
    <li><a href="#">Sub-Row</a>
    <ul>
                   
    <li><a href="#">Sub Sub-Row 2</a></li>
    </ul>
    </li>
    <li><a href="#">Sub-Row</a></li>
    <li><a href="#">Sub-Row</a></li>
    </ul>
    </li>
    
    <li><a href="#">Multi-Levels</a>
    <ul>
    <li><a href="#">Team</a>
    <ul>
    <li><a href="#">Sub-Level Item 1</a></li>
    <li><a href="#">Sub-Level Item 1</a>
    <ul>
    <li><a href="#">Sub-Level Item 11</a></li>
    <li><a href="#">Sub-Level Item 22</a></li>
    <li><a href="#">Sub-Level Item 33</a></li>
    </ul>
    </li>
                       
    <li><a href="#">Sub-Level Item 1</a></li>
    </ul>
    </li>
    <li><a href="#">Sales</a></li>
    <li><a href="#">Another Link</a></li>
    <li><a href="#">Department</a>
    <ul>
    <li><a href="#">Sub-Level Item 2</a></li>
    <li><a href="#">Sub-Level Item 2</a></li>
    <li><a href="#">Sub-Level Item 2</a></li>
    </ul>
    </li>
    </ul>
    </li><li><a href="#">Sitemap</a></li>   
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Create This </a></li>
    
    </ul></div>
    <br/>
    Last edited by TechnoBear; Apr 27, 2012 at 13:12. Reason: Code tags added

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi . Welcome to Sitepoint.

    There are two reasons. Well, one reason, and two places where it's occuring. You have overflow:hidden set on two parents which cause the nav menu to get cut off. It's hiding the menu.

    On #nav, and ".tabs-outer ", set it to overflow:visible (don't just remove overflow:hidden. It's inheriting the overflow:hidden from different rulesets"

    THe dropdown needs a higher z-index though as well. (Separate issue). If you only remove the overflows, it'll appaer, although some lines will show above it, and it doesn't look good having elements overlapping the dropdown. So on "#nav ul" give it a z-index. Such as z-index:1 (or higher if you wish) .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It dosen't work

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Show me the exact code you added. I'm at work so I can't see. I tested it for myself online, so unless I forgot something (not likely in this case), you did something wrong.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You didn't do as I said, thus it isn't working .

    I didn't say to remove overflow:hidden from #nav. I said to make it overflow:visible (I even put a mention in parenthesis saying to not remove it, but to set overflow:visible).

    Once that is done, it'll show. However you didn't do the z-index I mentioned either....#nav ul{} needs z-index:1.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I''ve set overflow :visible . But i don't find z-index on #nav ul ...Where should i fiind it ?

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you can change the code and than post it , it 'll be great ...

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You don't find it. Its not there. You have to add it. I resonded to your PM. You add in z-index:1 to the #nav ul{} rule.

    I'm going on vacation this weekend (along with doing a HM race) so I will not be able to go in and edit it for you.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •