关于jQuery下拉框的疑问

你可以在.main-li元素里面添加一个 .sub-menu-two元素
观察下说不定就有答案了
我把CSS里的sub-menu-two类删掉了，预览就不对了，上面是完整头部代码，请大神用DW预览一下看看
全部代码：首页代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Default.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main-li").hover(function(){
$(this).children(".sub-menu").show().prev("a").css({"color":"#000","text-decoration":"underline"});
},function(){
$(this).children(".sub-menu").hide().prev("a").css({"color":"#fff","text-decoration":"none"});
});
$(".sub-menu .main-li2").hover(function(){
$(this).children(".li2-a").css({"background-color":"#981C14","color":"#fff","text-decoration":"underline"});
$(this).children(".sub-menu-two").show();
},function(){
$(this).children(".li2-a").css({"background-color":"#7C2418","color":"#FF6633","text-decoration":"none"});
$(this).children(".sub-menu-two").hide();
});

});
</script>
<style>
.menu{
height:56px;
float:left;
padding-left:240px;}
.menu ul{
width:536px;
float:left;
}
.menu li{
padding-top:0px;
font-size:14px;
color:#FFF;
font-weight:bold;
width:75px;
float:left;}

.main-menu{
width:100%;
}
.main-menu .main-li{
float:left; padding-top:20px; height:32px; line-height:32px; position:relative; z-index:1;
}
.main-menu .main-li a{
display:block; font-weight:bold;
}
.main-menu .main-li .li-a{
float:left;
}
.main-menu .main-li .li-a{
width:75px;
}
.main-menu .main-li .sub-menu{
position:absolute; top:50px; display:none; z-index:2; left:-11px; width:89px; text-align:center; background-color:#999999;
}
.main-menu .main-li .sub-menu-two{
position:absolute; top:0px; display:none; z-index:3; left:89px;text-align:center;
}
.sub-menu-two a{
width:80px; background-color:black; float:none;
}
.sub-menu .li2-a{
background-color:#7C2418; float:none;width:89px;
}
.sub-menu a:hover{
background-color:#981C14;
}
.mail-li a:hover{ color:#000}
.menu a,.menu a:link{ color:#fff; text-decoration:none}
</style>
<title>SPA</title>
</head><body>
<div  class="main">
  <div class="head">
  <div class="menu">
  <ul class="main-menu">
  <li class="main-li"><a href="#">Spa新闻</a> </li><li style="width:15px; padding-top:0px;"><img src="img/topxian.jpg"></li>
  <li class="main-li"><a  href="#">Spa企业</a> <ul class="sub-menu">
<li class="main-li2"><a class="li2-a" href="/">自然美</a></li>
<li class="main-li2"><a class="li2-a" href="/">养生堂</a></li>
                <li class="main-li2"><a class="li2-a" href="/">实验</a></li>
</ul>
</li>
<li style="width:15px; padding-top:0px;"><img src="img/topxian.jpg"></li>
  <li class="main-li"><a  href="#">Spa文化</a>
  <ul class="sub-menu">
<li class="main-li2"><a class="li2-a" href="/">文化廊</a></li>
<li class="main-li2"><a class="li2-a" href="/">香薰池</a></li>
</ul>
</li>
<li style="width:15px; padding-top:0px;"><img src="img/topxian.jpg"></li>
  <li class="main-li"><a href="#">Spa培训</a> </li><li style="width:15px; padding-top:0px;"><img src="img/topxian.jpg"></li>
  <li class="main-li"><a href="#">Spa产品</a> </li><li style="width:15px; padding-top:0px;"><img src="img/topxian.jpg"></li>
  <li class="main-li"><a href="#">Spa论谈</a> </li>
  </ul>




  </div>
  </div>
  <div class="middmain">
    <div class="middmaintop"></div>
    <div class="leftmain">
      <div class="leftmaindiv">
        <div class="litle"><img src="img/ltitlekuai.jpg" border="0" height="28" style="float:left;" />SPA项目介绍</div>
        <div class="leftmainpic"><a href="#"><img src="img/3.jpg" border="0" style="float:left; padding-left:8px;"/></a><br />
          <font style="float:left; width:92px; text-align:center">四季之美 <br />
            (120分钟疗程)</font> <font style="float:left; width:196px; padding-top:10px; padding-left:8px;">　<a href="#">　以取自中国天然草本精华精炼而成的乳液去除全身死皮细胞，使肌肤重现青春活力。再加以适当的按摩帮助血液循环，恢复平衡。</a></font></div>
        <div class="leftmainpic"><a href="#"><img src="img/4.jpg" border="0" style="float:left; padding-left:8px;"/></a><br />
          <font style="float:left; width:92px; text-align:center">舒缓系列 <br />
            (60分钟)</font> <font style="float:left; width:196px; padding-top:10px; padding-left:8px;">　　<a href="#">淡紫色的薰衣草花香清甜，有怡神、静心、平衡情绪、促进皮肤细胞再生等作用。平和系列特别针对精神状态烦躁不稳定者，有助于安抚其低落的情绪，澄清纷乱的思绪。</a></font></div>
      </div>
    </div>
    <div class="rightmain">
    <div class="rightmaintop">
    <div class="rightmaintopleft">
    <div class="lefttitle">SPA简介</div>
    <img src="img/xian.jpg" border="0" style="width:230px; float:left;">
    <div class="leftmaintopleftcontent"><a href="#"><img src="img/5.jpg" border="0" style="float:left; padding-top:10px;" ></a><font >　　SPA就是人们利用矿泉水治疗疾病或改善健康状况，是予防医学的一种，它教人如何爱惜主命，探寻心灵的平衡，追求一种内在的平静，达到身、心、灵的健康.
</font>
<div class="downcontent">　<a href="#">　SPA女子会所，一直在努力营造一个全方位、多功能、自然的纯美私人享受空间；努力打造一所享受生活、雕塑美丽的皇家御宫，从而让美容院不仅仅是美容院！</a> </div>
</div>
    </div>

    <div class="rightmaintopleft" style="float:right">
    <div class="lefttitle">关于SPA女子会所</div>
    <img src="img/xian.jpg" border="0" style="width:230px; float:left;">
    <div class="leftmaintopleftcontent"><a href="#"><img src="img/6.jpg" border="0" style="float:left; padding-top:10px;" ></a><font >　随着美容业的不断发展，及美容高科技时代的到来，SPA女子会所还推出了面部冷疗，玉疗，水晶疗法等结合的身体养生项目。多类别仪器针对顾客不同需求与问题，结合</font>
      <div class="downcontent">　　<a href="#">美体SPA护肤用品，进行科学专业的搭配，设计出适合每位顾客的个性化疗程，让您感受身心完全放松的肌肤艺术，体验前所未有的美容效果。</a> </div>
</div>
    </div>
    </div>

    <div class="litle" style="width:490px;"><img src="img/ltitlekuai.jpg" border="0" height="28" style="float:left;" />SPA图库</div>

    <div class="pic">
    <ul><li><div style="width:116px"><a href="#"><img src="img/7.jpg" border="0"></a></div></li><li><div style="width:116px"><a href="#"><img src="img/8.jpg" border="0"></a></div></li><li><div style="width:116px"><a href="#"><img src="img/9.jpg" border="0"></a></div></li><li><div style="width:116px"><a href="#"><img src="img/10.jpg" border="0"></a></div></li></ul>
    </div>
    </div>
  </div>
  <div class="buttom"><a href="#">关于我们</a> | <a href="#">网站地图</a> | <a href="#">芳香美容</a> | <a href="#">水疗会所</a> | <a href="#">水疗中心</a> | <a href="#">联系我们</a>
<br>CopyRight [email protected] Rights Reserved
</div>
</div>
</body>
</html>CSS代码：*{
margin:0;
padding:0;}
.bady{
font-size:12px;
color:#000;
font-family:"宋体";}
.ul ,li{
list-style-type:none;}
.main{
background:#c04159;
width:775px;
height:919px;
margin:0 auto;
border:1px #000 solid;
overflow:hidden;}
.head{
overflow:hidden;
width:775px;
background:url(img/bigpic.jpg);
height:336px;
float:left;}
.menu{
height:56px;
float:left;
padding-left:240px;}
.menu ul{
}
.menu li{
padding-top:20px;
font-size:14px;
color:#FFF;
font-weight:bold;
width:75px;
float:left;}
.middmain{
float:left;
background:url(img/mainlitle.jpg);
height:514px;
width:775px;}
.middmaintop{
width:775px;
height:20px;
float:left;}
.leftmain{
width:220px;
height:450px;
padding-right:30px;
padding-left:20px;
float:left;}
.leftmaindiv{
background:#f9f8cb;
width:208px;
border:1px #FFF solid;
height:449px;}
.litle{

font-size:14px;
font-weight:bold;
width:208px;
float:left;
height:28px;
background:#FFF;
line-height:28px;}
.leftmainpic{
font-size:12px;
width:208px;
float:left;
height:142px;
padding:10px 0;}
.rightmain{
width:490px;
height:449px;
float:left;}
.rightmaintop{
width:490px;
height:270px;
float:left;
padding-bottom:20px;
}
.rightmaintopleft{
width:230px;
float:left;
height:270px;}
.lefttitle{
font-size:14px;
width:220px;
float:left;
height:28px;
line-height:28px;
padding-left:10px;
font-weight:bold}
.leftmaintopleftcontent{
width:230px;
float:left;}
.leftmaintopleftcontent font{font-size:12px; float:left; line-height:20px;
padding-top:10px; width:132px; padding-left:10px;}
.downcontent{
width:228px;
float:left;
font-size:12px;
line-height:20px;}
.pic{
width:490px;
height:118px;
float:left;
padding-top:10px;
}
.pic ul{

width:490px;
list-style-position:outside;}
.pic li{
padding-right:6px;
float:left;
list-style-type:none;
list-style-position:outside;
}
.buttom{
float:left;
font-size:12px;
width:775px;
padding-top:15px;
text-align:center;
line-height:20px;}
.buttom a,.buttom a:vistied,.buttom a:link{
text-decoration:none; color:#000;}
.buttom a:hover{
color:#666; text-decoration:underline;}.leftmainpic a,.leftmainpic a:vistied,.leftmainpic a:link{
text-decoration:none; color:#000;}
.leftmainpic a:hover{
color:#666; text-decoration:underline;}.downcontent a,.downcontent a:vistied,.downcontent a:link{
text-decoration:none; color:#000;}
.downcontent a:hover{
color:#666; text-decoration:underline;}
.menu a,.menu a:vistied,.menu a:link{
text-decoration:none; color:#fff;}
.menu a:hover{
color:#F0C; text-decoration:underline;}

调试易

关于jQuery下拉框的疑问

解决方案 »