<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript">...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<style>
/* reset */
body,ul { margin:0; padding:0; }
li { list-style:none; }
a { text-decoration:none; }
/* layout */
.nav {
width:140px;
}
.nav li {
}
.nav .navTitle {
position:relative;
display:block;
width:140px;
height:40px;
line-height:40px;
font-size:16px;
color:#118a11;
text-align:center;
background:#f4f9bf;
}
.nav .navTitle:hover {
color:green;
}
.nav .triangle {
display:block;
position:absolute;
top:40%;
right:10%;
width:0;
height:0;
overflow:hidden;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
-moz-transition:-moz-transform 0.2s ease-in; /* Firefox */
-o-transition:-o-transform 0.2s ease-in; /* Opera */
transition:transform 0.2s ease-in;
}
.nav .triangleH {
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
transform:rotate(180deg);
-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
-moz-transition:-moz-transform 0.2s ease-in; /* Firefox */
-o-transition:-o-transform 0.2s ease-in; /* Opera */
transition:transform 0.2s ease-in;
}
.nav ul {
display:blcok;
width:140px;
}
.nav ul li {
}
.nav ul li a {
display:block;
height:30px;
line-height:30px;
font-size:14px;
text-align:center;
color:#118a11;
background:#f4f9bf;
border-bottom:1px solid #118a11;
}
.nav ul li a:hover {
background:#fff;
}
.nav ul .li1 {
border-top:1px solid #118a11;
}
</style>
<script type="text/javascript">
$(function(){
$('li').hover(function(){
$(this).find('ul').css('display','block');
var show = $('.nav ul').css('display');
if( show == 'block')
{
$('.triangle').addClass('triangleH');
}
}, function(){
$(this).find("ul").css("display","none");
var show = $('.nav ul').css('display');
if( show == 'none')
{
$('.triangle').removeClass('triangleH');
}
});
});
</script>
</head>
<body>
<ul class="nav">
<li>
<a href="#" class="navTitle">我的模拟<span class="triangle"></span></a>
<ul>
<li class="li1"><a href="#">模拟一</a></li>
<li><a href="#">模拟二</a></li>
<li><a href="#">模拟三</a></li>
<li><a href="#">模拟四</a></li>
</ul>
</li>
</ul>
</body>
</html>
