how to add an arrow in a drop-down menu
I have a working simple jquery drop-down menu. But problem is how can I put an arrow or just '+' character each other like other usual menus if list has sub-menu, of course.
function Mx_menu(){
$(".menu ul").css({display: "none"}); // Opera Fix
$(".menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
Mx_menu();
});
And CSS file here:
.menu, .menu ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; }
.menu a { color:#a6a6a6; display:blo开发者_Go百科ck; padding:6px 10px; }
.menu li { float:left; position:relative; width:200px; }
.menu ul { position:absolute; display:none; width:200px; top:0; left:200px; }
.menu li ul a { width:200px; height:auto; float:left; }
.menu ul ul { top:auto; }
.menu li ul ul { left:200px; margin:0; }
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul { display:none; }
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul { display:block; }
Eventually I found a solution, so it's called: prev():
$(".menu li ul").prev().css("background", "url(IMG_URL) transparent");
Final jquery code here:
function Mx_menu(){
$(".menu li ul").prev().css("background", "url('IMG_URL')");
$(".menu ul").css({display: "none"}); // Opera Fix
$(".menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
Mx_menu();
});
You could do something simple like this to prepend a +
(or whatever ASCII character) just before the child <ul>
that's inside the <li>
using .before()
, like this:
$(".menu li ul").before(' +');
You can give it a try here
.menu li:hover ul li { background:transparent url( IMG_PATH ) left center no-repeat; padding-left:12px; }
Note the lack of support for the pseudo-selector of li, in IE6.
精彩评论