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:false, duration:1500, easing: '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:false, duration:1600, easing: '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 {
margin: 373px 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-position: left top;
border:0px solid #000000;
display:block;
float:left;
height:73px;
margin:0;
padding:0px;
width:187px;
}
ul#blockeasing li{
height:73px;
position:relative;
float: left;
display: block;
margin: 0;
padding: 0;
width: 187px;
}
ul#blockeasing li.menu-item a:hover {
background-position: left;
}
ul#blockeasing li.menu-item-20 a {
background: url(images/hjem_a.jpg);
width: 187px;
}
ul#blockeasing li.menu-item-21 a {
background: url(images/info_a.jpg) repeat-x;
width: 187px;
}
ul#blockeasing li.menu-item-23 a {
background: url(images/kategorier_a.jpg);
width: 187px;
}
ul#blockeasing li.menu-item-22 a {
background: url(images/arkiv_a.jpg);
width: 187px;
}
ul#blockeasing li.menu-item-24 a {
background: url(images/kontakt_a.jpg);
width: 187px;
}
ul#blockeasing li.current_page_item a {
background-position: left 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-indent: 0px; /*--Shoot the text off the page--*/
}