problem with background in jQuery dropdown menu
Posted: 22 January 2011 04:49 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-22

http://blogg.lmphoto.no/
this is the site, the “Info” and “Kategorier” buttons have a submenu, if you hover them, the menu drops down and looks all flashy and cool. The problem is that the top menu background is also in the submenu. And I have absolutely no idea why or how to remove it, I’ve been messing around with it for hours and have gotten nowhere.
I got it from this tutorial: http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html
And I modified it to work with another tutorial using CSS sprites to make the menu look pretty, which I assume is the problem to the background issue.
The Javascript code:

<!-- include jQuery Library From Google Code -->


<!-- include 
jQuery UI  From Google Code-->



 $(
document).ready(function() {

           
        
$("ul#blockeasing li.menu-item").mouseover(function()//When mouse over ...
               //Following event is applied to the subnav itself (making height of subnav 60px)
              
$(this).find('.sub-menu').stop().animate({height'60px'opacity:'1'},{queue:falseduration:1500easing'easeOutElastic'})
        
});
    
        $(
"ul#blockeasing li.menu-item").mouseout(function()//When mouse out ...
              //Following event is applied to the subnav itself (making height of subnav 0px)
              
$(this).find('.sub-menu').stop().animate({height:'0px'opacity:'0'},{queue:falseduration:1600easing'easeOutElastic'})
        
});


        
}); 

the menu code (output code, as it’s a wordpress menu):

<ul id="blockeasing" class="blockeasing">
<
li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-home menu-item-20"><a href="http://blogg.lmphoto.no/">Hjem</a></li>
<
li id="menu-item-21" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-2 current_page_item menu-item-21"><a href="http://blogg.lmphoto.no/about/">Info</a>
<
ul class="sub-menu">
    <
li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="http://blogg.lmphoto.no/about/mitt-utstyr/">Mitt utstyr</a></li>
</
ul>
</
li>
<
li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-23"><a href="http://blogg.lmphoto.no/kategorier/">Kategorier</a>
<
ul class="sub-menu">
    <
li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-33"><a href="http://blogg.lmphoto.no/kategorier/kategori-1/">Kategori 1</a></li>
</
ul>
</
li>
<
li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-22"><a href="http://blogg.lmphoto.no/arkiv/">Arkiv</a></li>
<
li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-24"><a href="http://blogg.lmphoto.no/kontakt/">Kontakt</a></li>
</
ul

the css

ul#blockeasing {
    
margin373px 0 0 134px
      
float:left;
      
padding:0;
      
width:935px;
      
height:73px;
      list-
style:none;
      
text-indent: -99999px/*--Shoot the text off the page--*/ 
}
ul
#blockeasing li.menu-item a{
      
background-positionleft top
      
border:0px solid #000000;
      
display:block;
      
float:left;
      
height:73px;
      
margin:0;
      
padding:0px;
      
width:187px;
}

ul
#blockeasing li{
      
height:73px;
      
position:relative
    
floatleft;
    
displayblock;
    
margin0
    
padding0;
    
width187px
}
ul
#blockeasing li.menu-item a:hover {
    
background-positionleft;
}

ul
#blockeasing li.menu-item-20 a {
    
backgroundurl(images/hjem_a.jpg);
    
width187px;
}
ul
#blockeasing li.menu-item-21 a {
    
backgroundurl(images/info_a.jpgrepeat-x;
    
width187px;
}
ul
#blockeasing li.menu-item-23 a {
    
backgroundurl(images/kategorier_a.jpg);
    
width187px;
}
ul
#blockeasing li.menu-item-22 a {
    
backgroundurl(images/arkiv_a.jpg);
    
width187px;
}
ul
#blockeasing li.menu-item-24 a {
    
backgroundurl(images/kontakt_a.jpg);
    
width187px;
}
ul
#blockeasing li.current_page_item a {
    
background-positionleft bottom;
}
ul
#blockeasing li ul.sub-menu{
     
background#111111;
     
border-bottom:2px solid #c13d93;
     
float:left;
     
padding:0;
     
position:absolute;
     
width:187px;
     
margin:60px 0 0 0;
     
height:0px;
     
display:none
     }

ul
#blockeasing li ul li{
    
border:none;
    
border-bottom:1px solid #ccc;
    
padding:5px;
    
float:left;
    
width:187px;
    
overflow:visible;
    
}
ul
#blockeasing li ul li a{
    
color#ffffff;
    
text-indent0px/*--Shoot the text off the page--*/
    
Profile
 
 
Posted: 23 January 2011 01:40 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-22

never mind, I figured it out, feel free to delete this topic!

Profile
 
 
Posted: 23 January 2011 03:03 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2011-01-23

what is the solution?

Profile