abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title></title>
<style type="text/css">
*{ padding: 0;margin: 0; list-style: none; font: arial;}
li{ cursor: pointer;}
em{float: right;}
section{width: 202px;}
div{ height: 40px; padding:0px 15px; line-height: 40px; background: #ffa200; color: #fff; font-size: 16px;}
.pOneBox{ border: 1px solid #ddd;}
.pOneBox>li{ width: 200px; min-height: 35px; padding: 0px 15px; box-sizing: border-box; border-bottom: 1px solid #fff; line-height: 35px; background: #eee; font-size: 14px; display: inline-block;}
.pOneBox>li .pTwoBox{position: relative;left:-15px; width: 200px; background: #fff; padding: 10px 15px; box-sizing: border-box;}
.pOneBox>li .pTwoBox>li{ position: relative; height: 35px; line-height: 35px; color: #666;border-bottom: 1px solid #eee;}
.pOneBox>li:last-child , .pOneBox>li .pTwoBox>li:last-child , .pOneBox>li .pTwoBox>li .pThreeBox>li:last-child{border: none;}
.pOneBox>li .pTwoBox>li .pThreeBox{ position:absolute;top:0px; left:184px; border: 1px solid #ddd; border-left:none; background: #fff; padding: 0px 15px; width: 100px;}
.pOneBox>li .pTwoBox>li .pThreeBox>li{ border-bottom: 1px solid #ddd;}
.pOne:hover , .pOne .pTwoBox>li:hover { color: #ffa200;}
.pOne .pTwoBox>li:hover li{ color: #666;}
.pOne .pTwoBox>li:hover li:hover{ color: #ffa200;}
</style>
</head>
<body>
<section>
<div>个人中心</div>
<ul class="pOneBox">
<li class="pOne">信息管理
<ul class="pTwoBox">
<li>编辑资料 <em>></em></li>
<li>银行卡管理 <em>></em></li>
</ul>
</li>
<li class="pOne">我的关注
<ul class="pTwoBox">
<li class="pTwo">
二手房 <em>></em>
<ul class="pThreeBox">
<li>委托卖房</li>
<li>自主卖房</li>
</ul>
</li>
<li class="pTwo">
租房 <em>></em>
<ul class="pThreeBox">
<li>委托租房</li>
<li>自主租房</li>
<li>求租</li>
<li>短租</li>
</ul>
</li>
</ul>
</li>
<li class="pOne">我的发布
<ul class="pTwoBox">
<li class="pTwo">
二手房 <em>></em>
<ul class="pThreeBox">
<li>委托卖房</li>
<li>自主卖房</li>
</ul>
</li>
<li class="pTwo">
租房 <em>></em>
<ul class="pThreeBox">
<li>委托租房</li>
<li>自主租房</li>
<li>求租</li>
<li>短租</li>
</ul>
</li>
</ul>
</li>
<li class="pOne">消息通知
<ul class="pTwoBox">
<li>系统消息 <em>></em></li>
<li>中介消息 <em>></em></li>
<li>房主消息 <em>></em></li>
</ul>
</li>
</ul>
</section>
<script type="text/javascript">
$(document).ready(function(){
$('.pTwoBox').hide();
$('.pThreeBox').hide();
$('.pOne').click(function(){
$('.pTwoBox').hide();
$(this).find('.pTwoBox').show();
});
$('.pTwo').mouseover(function(){
$(this).find('.pThreeBox').show(500);
});
$('.pTwo').mouseleave(function(){
$(this).find('.pThreeBox').hide(500);
});
});
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-19 09:32:56
Teacher's summary：完成的不错。把常用的css样式，单独提出来，写成公用文件，以后方便使用。继续加油。