您的位置：首页 > 其它

六步轻松搞定下拉菜单(模仿博客园首页导航菜单)

2011-05-02 22:12 127 查看

博客园首页的导航是纵向导航，今天模仿写了个横向导航的。哈哈一会再写个纵向导航的就当练练手哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿博客园首页导航菜单</title>
<style type="text/css">
/*第一步  先把无序列表前面发符号去掉 同时把内外间隔设为0*/
ul{
margin:0;
padding:0;
list-style:none;
}

/*第二步 把所有的列表项设置一个宽度 让它们都浮动在左边*/
li{
float:left;
width:110px;
}

/*第三步 隐藏掉子菜单*/
li ul{
display:none;
}

/*第四步 当鼠标移动到列表项上显示其下的子菜单*/
li:hover ul{
display:block;
}

/*第五步 给超链接加个修饰 边框，字体大小，字体位置....*/
li a{
display:block;
text-decoration:none;
font-size:14px;
border:1px solid #FF6600;
text-align:left;
}

/*第六步 鼠标移动到超链接上给其附上一个背景色*/
li a:hover{
background:#FF9900;
}

li ul li a{
border-top-width:0;/*子菜单项的边框线重合在一起看起来有点儿粗  所以就去掉顶部边框线*/
}

#nav li a{
border-left-width:0;
border-right-width:0;
}

</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>

效果就如上图所示。

只要按照前面那六步样式设置肯定没错，后来我看到导航菜单和下拉菜单的边框线重合了有点粗，就加了那两个样式，大家可以不加，效果照样有的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航