<head>
<title>左侧菜单效果</title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () { $(".testbox ul li").hover(function () { $(this).find(".boxshow").show(); }, function () { $(this).find(".boxshow").hide(); }); });
</script>
<style type="text/css">
*
{
padding: 0;
list-style: none;
margin: 0;
}
body
{
/**/background: #ffffff;
}
.testbox
{
margin-top: 10px;
margin-left: 10px;
width: 200px;
}
.testbox ul li a
{
color: black;
font-size: 12px;
text-decoration: none;
background-color: #eeeeff;
padding: 8px;
float: left;
border: 1px solid #FFF;
position: relative;
width: 100px;
}
.testbox ul li a:hover
{
color: #000;
font-size: 12px;
text-decoration: none;
background-color: #ffffcc;
padding: 8px;
float: left;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 1px;
border-right-style: solid;
width: 87px;
}
.boxshow
{
background-color: #ffffcc;
height: 263px;
width: 150px;
position: absolute;
left: 118px;
border: 1px solid #FFF;
font-size: 12px;
color: #000;
padding: 10px;
top: 45px;
display: none;
z-index: 1;
}
</style>
</head>
<body>
<div class="testbox">
<ul>
<li><a>网站分类</a></li>
<li><a href="#">.NET技术</a>
<div class="boxshow">
<ul>
<li><a>.NET新手区</a></li>
<li><a>ASP.NET</a></li>
<li><a>C#</a></li>
<li><a>WinForm</a></li>
<li><a>Silverlight</a></li>
<li><a>WCF</a></li>
</ul>
</div>
</li>
<li><a href="#">编程语言</a>
<div class="boxshow">
<ul>
<li><a>JAVA</a></li>
<li><a>C++</a></li>
<li><a>PHP</a></li>
</ul>
</div>
</li>
<li><a href="#">软件设计</a>
<div class="boxshow">
<ul>
<li><a>架构设计</a></li>
<li><a>面向对象</a></li>
<li><a>设计模式</a></li>
</ul>
</div>
</li>
<li><a href="#">Web前端</a>
<div class="boxshow">
<ul>
<li><a>Html/Css</a></li>
<li><a>JavaScript</a></li>
<li><a>HTML5</a></li>
<li><a>jQuery</a></li>
</ul>
</div>
</li>
<li><a href="#">企业信息化</a>
<div class="boxshow">
<ul>
<li><a>SAP</a></li>
<li><a>SharePoint</a></li>
<li><a>GIS技术</a></li>
<li><a>Oracle ERP</a></li>
</ul>
</div>
</li>
<li><a href="#">手机开发</a>
<div class="boxshow">
<ul>
<li><a>Android开发</a></li>
<li><a>IOS开发</a></li>
<li><a>Windows Phone</a></li>
<li><a>Windows Mobile</a></li>
</ul>
</div>
</li>
<li><a href="#">软件工程</a>
<div class="boxshow">
<ul>
<li><a>敏捷开发</a></li>
<li><a>项目与团队管理</a></li>
<li><a>软件工程</a></li>
</ul>
</div>
</li>
<li><a href="#">数据库技术</a>
<div class="boxshow">
<ul>
<li><a>SQL Server</a></li>
<li><a>MySQL</a></li>
<li><a>Oracle</a></li>
<li><a>NoSQL</a></li>
</ul>
</div>
</li>
<li><a href="#">操作系统</a>
<div class="boxshow">
<ul>
<li><a>Windows7</a></li>
<li><a>Windows Server</a></li>
<li><a>Linux</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
<title>左侧菜单效果</title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () { $(".testbox ul li").hover(function () { $(this).find(".boxshow").show(); }, function () { $(this).find(".boxshow").hide(); }); });
</script>
<style type="text/css">
*
{
padding: 0;
list-style: none;
margin: 0;
}
body
{
/**/background: #ffffff;
}
.testbox
{
margin-top: 10px;
margin-left: 10px;
width: 200px;
}
.testbox ul li a
{
color: black;
font-size: 12px;
text-decoration: none;
background-color: #eeeeff;
padding: 8px;
float: left;
border: 1px solid #FFF;
position: relative;
width: 100px;
}
.testbox ul li a:hover
{
color: #000;
font-size: 12px;
text-decoration: none;
background-color: #ffffcc;
padding: 8px;
float: left;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 1px;
border-right-style: solid;
width: 87px;
}
.boxshow
{
background-color: #ffffcc;
height: 263px;
width: 150px;
position: absolute;
left: 118px;
border: 1px solid #FFF;
font-size: 12px;
color: #000;
padding: 10px;
top: 45px;
display: none;
z-index: 1;
}
</style>
</head>
<body>
<div class="testbox">
<ul>
<li><a>网站分类</a></li>
<li><a href="#">.NET技术</a>
<div class="boxshow">
<ul>
<li><a>.NET新手区</a></li>
<li><a>ASP.NET</a></li>
<li><a>C#</a></li>
<li><a>WinForm</a></li>
<li><a>Silverlight</a></li>
<li><a>WCF</a></li>
</ul>
</div>
</li>
<li><a href="#">编程语言</a>
<div class="boxshow">
<ul>
<li><a>JAVA</a></li>
<li><a>C++</a></li>
<li><a>PHP</a></li>
</ul>
</div>
</li>
<li><a href="#">软件设计</a>
<div class="boxshow">
<ul>
<li><a>架构设计</a></li>
<li><a>面向对象</a></li>
<li><a>设计模式</a></li>
</ul>
</div>
</li>
<li><a href="#">Web前端</a>
<div class="boxshow">
<ul>
<li><a>Html/Css</a></li>
<li><a>JavaScript</a></li>
<li><a>HTML5</a></li>
<li><a>jQuery</a></li>
</ul>
</div>
</li>
<li><a href="#">企业信息化</a>
<div class="boxshow">
<ul>
<li><a>SAP</a></li>
<li><a>SharePoint</a></li>
<li><a>GIS技术</a></li>
<li><a>Oracle ERP</a></li>
</ul>
</div>
</li>
<li><a href="#">手机开发</a>
<div class="boxshow">
<ul>
<li><a>Android开发</a></li>
<li><a>IOS开发</a></li>
<li><a>Windows Phone</a></li>
<li><a>Windows Mobile</a></li>
</ul>
</div>
</li>
<li><a href="#">软件工程</a>
<div class="boxshow">
<ul>
<li><a>敏捷开发</a></li>
<li><a>项目与团队管理</a></li>
<li><a>软件工程</a></li>
</ul>
</div>
</li>
<li><a href="#">数据库技术</a>
<div class="boxshow">
<ul>
<li><a>SQL Server</a></li>
<li><a>MySQL</a></li>
<li><a>Oracle</a></li>
<li><a>NoSQL</a></li>
</ul>
</div>
</li>
<li><a href="#">操作系统</a>
<div class="boxshow">
<ul>
<li><a>Windows7</a></li>
<li><a>Windows Server</a></li>
<li><a>Linux</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>