<!DOCTYPE />
<html>
<head>
<style type="text/css">
ul
{
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background-color: Orange;
border: 1px solid red;
}
.lili:hover
{
padding: 5px;
background-color: #FC756F;
border-left-color: #51A9F3;
border-right-color: #51A9F3;
border-left-width: medium;
border-right-width: medium;
font-weight: bolder;
color: White;
}
.lili
{
padding-top: 5px;
height: 25px;
border-top: solid 2px Orange;
border-bottom: solid 2px Orange;
color: black;
background-color: White;
}
span
{
font-weight: bolder;
color: black;
}
span:hover
{
color: White;
font-size: large;
}
.lititle a
{
font-size: larger;
font-weight: 900;
color: White;
}
a
{
text-decoration: none;
}
.lititle:hover
{
cursor: pointer;
}
.ggtitle
{
border-top: 1px solid red;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".tztitle").click(function () {
$(".tz").fadeToggle(1000);
});
$(".ggtitle").click(function () {
$(".gg").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div>
<ul class="ulul">
<li class="lititle tztitle"><a id="aaa">通知</a></li>
<li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>我的通知</span></a></li>
<li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>未读通知</span></a></li>
<li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>发布通知</span></a></li>
<li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>已发通知</span></a></li>
<li class="lititle ggtitle"><a>公告</a></li>
<li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>我的公告</span></a></li>
<li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>未读公告</span></a></li>
<li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>发布公告</span></a></li>
<li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>已发公告</span></a></li>
</ul>
</div>
</body>
</html>
