您的位置：首页 > Web前端 > CSS

模仿博客园首页导航菜单 Css

2011-05-02 23:01 363 查看
模仿博客园首页写的一个导航菜单。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用Css模仿博客园首页写的一个导航菜单</title>

<style type="text/css">
ul{
margin:0px;
padding:0px;
list-style:none;
width:150px;
}

ul li{
position:relative;
}

li ul{
position:absolute;
left:149px;	/*无序列表项宽150px 边框又宽1px 所以右边浮动的菜单要距左边149px*/
top:0px;/*如果不设置此属性 弹出来的菜单总是 '矮人一等'*/
display:none;
}

ul li a{
display:block;
font-size:14px;
border:1px solid #FF0033;
text-align:center;
text-decoration:none;
}

ul li a:hover{
background:#999999;	/*鼠标悬停在超链接上改变其背景色*/
color:#FFFFFF;
}
li:hover ul{
display:block;	/*鼠标移动到超链接上显示其对应的子菜单*/
}
</style>
</head>

<body>
<ul id="nav">
<li>
<a href="#">.Net技术类</a>
<ul>
<li><a href="#">ASP.Net</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">WinForm</a></li>
<li><a href="#">SilverLight</a></li>
<li><a href="#">WCF</a></li>
<li><a href="#">CLR</a></li>
</ul>
</li>
<!--第一个菜单结束-->

<li>
<a href="#">编程语言</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Delphi</a></li>
<li><a href="#">C</a></li>
<li><a href="#">Ruhy</a></li>
</ul>
</li>
<!--第二个菜单结束-->

<li>
<a href="#">软件设计</a>
<ul>
<li><a href="#">架构设计</a></li>
<li><a href="#">面向对象</a></li>
<li><a href="#">设计模式</a></li>
</ul>
</li>
<!--第三个菜单结束-->

<li>
<a href="#">Web前端</a>
<ul>
<li><a href="#">html/css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Html5</a></li>
</ul>
</li>
<!--第四个菜单结束-->

<li>
<a href="#">企业信息化</a>
<ul>
<li><a href="#">Sap</a></li>
<li><a href="#">SharePoint</a></li>
<li><a href="#">GIS技术</a></li>
<li><a href="#">Oracle ERP</a></li>
<li><a href="#">Dynamics CRM</a></li>
<li><a href="#">企业信息化其它</a></li>
</ul>
</li>
<!--第五个菜单结束-->

<li>
<a href="#">手机开发</a>
<ul>
<li><a href="#">Android开发</a></li>
<li><a href="#">iPhone开发</a></li>
<li><a href="#">Windows Mobile</a></li>
<li><a href="#">其它手机开发</a></li>
</ul>
</li>
<!--第六个菜单结束-->

<li>
<a href="#">软件工程</a>
<ul>
<li><a href="#">敏捷开发</a></li>
<li><a href="#">项目与团队管理</a></li>
<li><a href="#">软件工程其它</a></li>
</ul>
</li>
<!--第七个菜单结束-->

<li>
<a href="#">数据库技术</a>
<ul>
<li><a href="#">SqlServer</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySql</a></li>
<li><a href="#">其它数据库</a></li>
</ul>
</li>
<!--第八个菜单结束-->

<li>
<a href="#">操作系统</a>
<ul>
<li><a href="#">Windows 7</a></li>
<li><a href="#">Windows Server</a></li>
<li><a href="#">Linux</a></li>
</ul>
</li>
<!--第九个菜单结束-->

<li>
<a href="#">其它分类</a>
<ul>
<li><a href="#">非技术区</a></li>
<li><a href="#">软件测试</a></li>
<li><a href="#">代码与软件发布</a></li>
<li><a href="#">计算机图形学</a></li>
<li><a href="#">Google开发</a></li>
<li><a href="#">程序人生</a></li>
<li><a href="#">求职面试</a></li>
<li><a href="#">读书区</a></li>
<li><a href="#">转载区</a></li>
<li><a href="#">Windows CE</a></li>
<li><a href="#">翻译区</a></li>
<li><a href="#">开源研究</a></li>
<li><a href="#">Flex</a></li>
<li><a href="#">云计算</a></li>
<li><a href="#">其它技术区</a></li>
</ul>
</li>
<!--第十个菜单结束-->
</ul>
</body>
</html>




效果图如上所示。 用Css+ul 无序列表写的很实在 很好用。 哈哈哈
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航