با سلام خدمت دوستان
من در سطح سوم از منو افقی دچار مشکل شده ام لطفا راهنمایی کنید.
من در سطح سوم از منو افقی دچار مشکل شده ام لطفا راهنمایی کنید.
کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>فروشگاه اینترنتی</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body style="margin:0; padding:0;">
<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->
<style>
#ertebat a{ font-family:tahoma; font-size:12px; margin:0 6px; float:right; }
#ertebat span{float:right;}
#ertebat > a > img{ vertical-align:middle;}
</style>
<div id="ertebat" style="width:1100px; height:37px; margin:0 auto; background:#D9E1DE; text-align:right; direction:rtl; line-height:35px;">
<a>بازگشت به صفحه نخست</a>
<span>|</span>
<a>درباره ما</a>
<span>|</span>
<a>تماس با ما</a>
<a style="margin-right:180px; margin-top:-10px;"> </a>
<a style="float:left; box-shadow:1px 1px 8px #ccc; margin-left:2px; border-radius:8px;"> <img src="img/sabad.png"> سبد خرید شما </a>
</div><!--ertebat-->
<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->
<style>
#menu > ul{ padding:0; margin:0; width:100%; height:100%;}
#menu > ul >li , #menu >ul >li >ul >li { float:right; direction:rtl; list-style:none; background:url(img/line1.jpg) right center no-repeat ; padding:0 10px; line-height: 34px; font-family:tahoma; font-size:12px; height:100%; cursor:pointer; }
#menu > ul >li >img { vertical-align:middle;}
#menu > ul >li >ul {padding:0; margin:0; width:1100px; height:37px; margin:0 auto; position:absolute; right:0; top:37px; z-index:2; color:#fff; display:none;}
</style>
<div id="top1" style="width:100%; height:37px; background:#003; margin-top:3px;">
<div id="menu" style="width:1100px; height:100%; background:#A4DAF7; margin:0 auto; height:100%; position:relative;">
<ul>
<li> <img src="img/home54.png"> صفحه نخست </li>
<li> <img src="img/tel.png"> گوشی همراه
<ul>
<li>samsung<ul><li>s7</li></ul></li>
<li>nokia</li>
<li>htc</li>
</ul>
</li>
<li> <img src="img/laptop.png"> لپ تاپ
<ul>
<li>ASUS<ul><li>x555</li></ul></li>
<li>ACER<ul><li>55610</li></ul></li>
<li>SONY<ul><li>nk253</li></ul></li>
</ul>
</li>
<li> <img src="img/tv.png"> تلویزیون </li>
<li> <img src="img/pc.png"> کامپیوتر </li>
</ul>
<!--menu1-->
<div id="menu2" style="width:1100px; top:74px; height:37px; background:#ccc; position:absolute; display:none;"></div><!--menu2-->
</div><!--menu-->
<div id="menu1" style="width:100%; height:37px; background:#006; position:absolute; display:block;"></div>
</div><!--top1-->
<?php
include('script.php');
?>
</body>
</html>کد:
<script>
$("#menu > ul >li").hover(function(){
$(this).css('background','url(img/line2.jpg) right center no-repeat ');
var number=$(this).find('ul').length;
if(number>0){
$("#menu1").slideDown(600);
$(this).find('ul').css('display','block');
}
else{$("#menu1").slideUp(300);$("#menu2").slideUp(300);}
},
function(){
$(this).css('background','url(img/line1.jpg) right center no-repeat ');
$(this).find('ul').css('display','none');
})
$("#menu").mouseleave(function(){
$("#menu1").slideUp(300);
})
$("#menu > ul >li> ul >li").hover(function(){
$(this).css('background','url(img/line2.jpg) right center no-repeat ');
var number=$(this).find('ul').length;
if(number>0){
$("#menu2").slideDown(1000);
$(this).find('ul > li').css('display','block');
}
else{$("#menu2").slideUp(200);$("#menu2").slideUp(200);}
},
function(){
$(this).css('background','url(img/line1.jpg) right center no-repeat ');
$(this).find('ul > li').css('display','none');
})
$("#menu").mouseleave(function(){
$("#menu2").slideUp(200);
})
</script>
) برداشته شد اون div پس زمینه محو نشه...