#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0

    Exclamation Problem with Expanding Menu


    Hi,

    I want to use a drop down menu in blogspot.
    I've tried 2 scripts.
    Both are attached. Making either of them will solve my issue.

    The posts in the blog are below the menu.
    When the menu expands, the expanded items are not seen.
    They're going behind the posts that is immediately below the menu.

    Kindly advise me how this can be corrected.
    Tx!

    Menu 1 -

    Code:
    <center><style>
    #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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) 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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) 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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) 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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) 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; 
    } 
    </style>
    <div id="MBT-Container"> 
    <ul id="nav"> 
    <li class="current"><a href="http://gog.com">Home</a></li> 
    <li><a href="http://asd.org">Free Subscription</a></li>           
    
    </ul></div>
    <center></center></center>
    Menu #2 -

    Code:
    <style> ul.ldd_menu {
        margin: 0px;
        padding: 0;
        display: block;
        height: 50px;
        background-color: #D04528;
        list-style: none;
        font-family: "Trebuchet MS", sans-serif;
        border-top: 1px solid #EF593B;
        border-bottom: 1px solid #EF593B;
        border-left: 10px solid #D04528;
        -moz-box-shadow: 0px 3px 4px #591E12;
        -webkit-box-shadow: 0px 3px 4px #591E12;
        -box-shadow: 0px 3px 4px #591E12;
    }
     
    ul.ldd_menu a {
        text-decoration: none;
    }
     
    ul.ldd_menu > li {
        float: left;
        position: relative;
    }
     
    ul.ldd_menu > li > span {
        float: left;
        color: #fff;
        background-color: #D04528;
        height: 50px;
        line-height: 50px;
        cursor: default;
        padding: 0px 20px;
        text-shadow: 0px 0px 1px #fff;
        border-right: 1px solid #DF7B61;
        border-left: 1px solid #C44D37;
    }
     
    ul.ldd_menu .ldd_submenu {
        position: absolute;
        top: 50px;
        width: 550px;
        display: none;
        opacity: 0.95;
        left: 0px;
        font-size: 10px;
        background: #C34328;
        border-top: 1px solid #EF593B;
        -moz-box-shadow: 0px 3px 4px #591E12 inset;
        -webkit-box-shadow: 0px 3px 4px #591E12 inset;
        -box-shadow: 0px 3px 4px #591E12 inset;
    }
     
    a.ldd_subfoot {
        background-color: #f0f0f0;
        color: #444;
        display: block;
        clear: both;
        padding: 15px 20px;
        text-transform: uppercase;
        font-family: Arial, serif;
        font-size: 12px;
        text-shadow: 0px 0px 1px #fff;
        -moz-box-shadow: 0px 0px 2px #777 inset;
        -webkit-box-shadow: 0px 0px 2px #777 inset;
        -box-shadow: 0px 0px 2px #777 inset;
    }
     
    ul.ldd_menu ul {
        list-style: none;
        float: left;
        border-left: 1px solid #DF7B61;
        margin: 20px 0px 10px 30px;
        padding: 10px;
    }
     
    li.ldd_heading {
        font-family: Georgia, serif;
        font-size: 13px;
        font-style: italic;
        color: #FFB39F;
        text-shadow: 0px 0px 1px #B03E23;
        padding: 0px 0px 10px 0px;
    }
     
    ul.ldd_menu ul li a {
        font-family: Arial, serif;
        font-size: 10px;
        line-height: 20px;
        color: #fff;
        padding: 1px 3px;
    }
     
    ul.ldd_menu ul li a:hover {
        -moz-box-shadow: 0px 0px 2px #333;
        -webkit-box-shadow: 0px 0px 2px #333;
        box-shadow: 0px 0px 2px #333;
        background: #AF412B;
    } </style> 
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /**
             * the menu
             */
            var $menu = $('#ldd_menu');
     
            /**
             * for each list element,
             * we show the submenu when hovering and
             * expand the span element (title) to 510px
             */
            $menu.children('li').each(function () {
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width', $span.width());
     
                $this.bind('mouseenter', function () {
                    $menu.find('.ldd_submenu').stop(true, true).hide();
                    $span.stop().animate({
                        'width': '510px'
                    }, 300, function () {
                        $this.find('.ldd_submenu').slideDown(300);
                    });
                }).bind('mouseleave', function () {
                    $this.find('.ldd_submenu').stop(true, true).hide();
                    $span.stop().animate({
                        'width': $span.data('width') + 'px'
                    }, 300);
                });
            });
        });
    </script>
     
    <ul id="ldd_menu" class="ldd_menu">
     <li>
     <span>Vacations</span>
     <!-- Increases to 510px in width-->
     <div class="ldd_submenu">
      <ul>
       <li class="ldd_heading">By Location</li>
       <li><a href="#">South America</a></li>
       <li><a href="#">Antartica</a></li>
       <li><a href="#">Africa</a></li>
       <li><a href="#">Asia and Australia</a></li>
       <li><a href="#">Europe</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Category</li>
       <li><a href="#">Sun &amp; Beach</a></li>
       <li><a href="#">Adventure</a></li>
       <li><a href="#">Science &amp; Education</a></li>
       <li><a href="#">Extreme Sports</a></li>
       <li><a href="#">Relaxing</a></li>
       <li><a href="#">Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Theme</li>
       <li><a href="#">Paradise Islands</a></li>
       <li><a href="#">Cruises &amp; Boat Trips</a></li>
       <li><a href="#">Wild Animals &amp; Safaris</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Helping others &amp; For Hope</a></li>
       <li><a href="#">Diving</a></li>
      </ul>
      <a class="ldd_subfoot" href="#"> + New Deals</a>
     </div>
     </li>
     <li>
     <span>Equipment</span>
     <div class="ldd_submenu">
      <ul>
       <li class="ldd_heading">By Location</li>
       <li><a href="#">South America</a></li>
       <li><a href="#">Antartica</a></li>
       <li><a href="#">Africa</a></li>
       <li><a href="#">Asia and Australia</a></li>
       <li><a href="#">Europe</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Category</li>
       <li><a href="#">Sun &amp; Beach</a></li>
       <li><a href="#">Adventure</a></li>
       <li><a href="#">Science &amp; Education</a></li>
       <li><a href="#">Extreme Sports</a></li>
       <li><a href="#">Relaxing</a></li>
       <li><a href="#">Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Theme</li>
       <li><a href="#">Paradise Islands</a></li>
       <li><a href="#">Cruises &amp; Boat Trips</a></li>
       <li><a href="#">Wild Animals &amp; Safaris</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Helping others &amp; For Hope</a></li>
       <li><a href="#">Diving</a></li>
      </ul>
      <a class="ldd_subfoot" href="#"> + New Deals</a>
     </div>
     </li>
     <li>
     <span>Locations</span>
     <div class="ldd_submenu">
      <ul>
       <li class="ldd_heading">By Location</li>
       <li><a href="#">South America</a></li>
       <li><a href="#">Antartica</a></li>
       <li><a href="#">Africa</a></li>
       <li><a href="#">Asia and Australia</a></li>
       <li><a href="#">Europe</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Category</li>
       <li><a href="#">Sun &amp; Beach</a></li>
       <li><a href="#">Adventure</a></li>
       <li><a href="#">Science &amp; Education</a></li>
       <li><a href="#">Extreme Sports</a></li>
       <li><a href="#">Relaxing</a></li>
       <li><a href="#">Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class="ldd_heading">By Theme</li>
       <li><a href="#">Paradise Islands</a></li>
       <li><a href="#">Cruises &amp; Boat Trips</a></li>
       <li><a href="#">Wild Animals &amp; Safaris</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Helping others &amp; For Hope</a></li>
       <li><a href="#">Diving</a></li>
      </ul>
      <a class="ldd_subfoot" href="#"> + New Deals</a>
     </div>
     </li>
    </ul>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    Hi somkkk ,

    I may be guessing, but increasing the width when the top-level is hovered may be causing layout issues. When working with drop-down menus, I prefer to have the child list positioned off the screen and out of view using absolute positioning (like you are already using), and then I move to re-position it when the parent list-item is hovered. That can be done solely in CSS. Then you can animate it with jQuery to fadeIn() or animate() or whatever you like.

    However, since you said the list is appearing "behind the post content", this may mean the blog post has a higher z-index than your drop-downs. Try setting a z-index on the drop-down content.

    I'd be interested to see the blog content and its CSS styles to compare it to what you have in the drop-downs.

    Also, unrelated, your JavaScript variables are being named like PHP variables. Lose the '$' - you don't need it, and that's going to confuse you, especially with jQuery.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    Hi,

    Tx for the quick replies!
    Tried adding the z-index.

    No difference.,

    Plz chk the below screenshot.

    This is in the latest version of chrome.

    As you can see, the "Blogger Tricks" menu is behind the main post content.
    The post content is part of blogger's standard layout. Nothing modified there.

    hxxp://tinypic.com/r/2iu7p5y/6
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    Okay, that was a helpful screenshot, so we know what you meant exactly on the drop-down menu appearing behind the post content.

    The other thing you may try is adding an overflow:visible; to your #nav styles as well as ul.ldd_menu . This may be the issue.

    The drop-down may be behaving as desired, and the issue may be in the rest of the styles. Can you please post that?

    Hope that helps.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    Hi Etidd,

    I don't have any custom CSS etc.
    I'll paste the theme itself from Blogger.

    Will that help ?

    Added the overflow:visible. (That was added AFTER I pasted the code in pastebin.com)
    Now the menu is VISIBLE!!!!

    In the blogger-tricks submenu, there are 3 vertically stacked items.
    When I take the cursor over the first item, things are fine.
    But when I do that for the 2nd item, then the entire menu disapears!!

    This is for all the menus items.

    Plz advise.
    I'm completely new to this.
    SO appreciate the help

    hxxp://pastebin.com/tBx3q2FF
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    I guess that may help. Although, I have never worked with blog sites- Wordpress, Blogger, etc. I'm guessing that there may be quite a bit of PHP in there. Surely, it has something to do with it, though, if the last two suggestions I made are not working.

    Although, I'm not exactly a guru. I've been in web development for just about 2 years, maybe a little less than that. I'm hoping that someone more experienced will jump in on this thread and offer some advice.

    I want to help because when I'm on these forums, I'm always the one asking and never trying to help someone else out.

    Do post what you have for the layout. The more info available here should make this more expedient.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    The layout is in the link at the bottom of my previous post.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    Shoot. I hate to tell you this, but I don't seem to know what else for you to try.

    It's really a shame that no one else has jumped in to offer some advice, so here's what I think you should do: go sign up and post this same question on SitePoint forums and WebDesignForums.net. Hopefully you'll get some help there.

    I wanted to know the solution, too, because I want to learn something from this.

IMN logo majestic logo threadwatch logo seochat tools logo