使⽤CSS实现下拉菜单的效果
实现下拉菜单的效果，很多⼈喜欢先使⽤CSS将样式调试好后，再通过JavaScript⾃定义⼀个类似于nav_menu()的函数来处理⿏标操作来达到下拉菜单的效果。不过，本⼈认为⽹站开发过程中，完全没有必要添加太多的JavaScript代码（主要是从⽹站的流畅性和访问速度考虑的，JavaScript代码中⼀旦出现错误，⽹站就会卡在那⾥。对于⾮⼤师级的我们还是尽量避免那些以外吧）。
闲话少说，尽CSS实现下拉菜单的主要原理是：当⿏标不在菜单上时，下拉的内容存在，不过利⽤left: -9999px；属性值来实现，在这个位置我们是⽆法在页⾯中看到的。然⽽，当⿏标移到菜单上时，则实现left: auto；这样就⾃动显⽰在合适的位置。本⼈利⽤这种逻辑实现了⼀个下拉菜单导航，效果图（Metro风格）如下：
这种技巧⼀般是⽆法使⽤语⾔来描述清楚的，详细的代码如下，希望读者能够⾃⼰敲写⼀遍后慢慢理解（仅限⼊门级啦）。
HTML⽂件：nav.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<!--下拉菜单的实现-->
<title>仅使⽤CSS实现下拉菜单样例</title>
<link rel="stylesheet" href="nav.css" />
</head>
<body>
<div id="div_center">
<ul id="nav">
<li><a href="www.shopliyang" title="⾸页">| ⾸页</a>            </li>
<li><a href="#" title="asp">asp</a>
<ul>
<li><a href="#">mvc</a></li>
<li><a href="#">web前端</a></li>
</ul>
</li>
<li><a href="#" title="linux">linux</a>
<ul>
<li><a href="#">服务器配置</a></li>
<li><a href="#">数据库管理</a></li>
</ul>
</li>
<li><a href="#" title="数据结构与算法">数据结构与算法</a>
<ul>
<li><a href="#">链表|栈|队列</a></li>
<li><a href="#">树|图|⽹</a></li>
<li><a href="#">经典算法</a></li>
</ul>
</li>
<li><a href="#" title="数据挖掘技术">数据挖掘技术</a>
<ul>
<li><a href="#">流数据</a></li>
</ul>
</li>
<li><a href="#" title="关于">About Me</a>
<ul>
<li><a href="#">技术⽀持</a></li>
<li><a href="#">关于博主</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS样式⽂件：nav.css
/*定义总体宽度|⾼度|背景颜⾊|居中对齐*/
#div_center
{
width: 1280px;
height: 30px;
background: #44c7e5;
margin: auto;
}
/*控制⼀级菜单⾏⾼|上边距|*/
/*控制⼀级菜单⾏⾼|上边距|*/
#nav
{
line-height: 30px;
list-style-type: none;
margin-top: 0px;
}
/*⼀级菜单链接总体样式：每个菜单的宽|居中对齐|⽂字⼤⼩*/    #nav a
{
display: block;
text-align: center;
font-family: 'Microsoft Sans Serif','Microsoft YaHei';
font-size: 18px;
}
/* 未访问的链接 */
#nav a:link
{
color: #200787;
text-decoration: none;
margin: 0px;
}
/* 已访问的颜⾊ */
#nav a:visited
{
color: #FFF;
text-decoration: none;
margin: 0px;
}
/*⿏标在链接上*/
#nav a:hover
{
color: #200787;
text-decoration: none;
margin: 0px;
}
/* ⼀级菜左对齐 */
#nav li
{
float: left;
margin-right: 8px;
}
/* ⿏标在⼀级菜单上改变其背景⾊ */
#nav li a:hover
{
background: #4800ff;
color: #ff0000;
}
/*⼆级菜单总体样式：背景颜⾊|外框宽度|
相对位置|边框⼀个象素|上边没样式|
左右下边实线|边框颜⾊|
html下拉菜单的制作方法内边距1个象素*/
#nav li ul
{
line-height: 24px; /*⾏⾼24px*/
background: #FFF;
list-style-type: none;
text-align: left;
left: -9999px; /*使ul标签下的内容⽆法可视*/
width: 132px;
position: absolute;
border-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-left-style: solid;
border-color: #003399;
padding: 1px;
margin: 0px;
}
/*⼆级菜单链接样式；背景宽度|左对齐|左缩进*/            #nav li ul a
{
display: block;
width: 130px;
text-align: left;
padding-left: 2px;
}
/* 未访问的链接 */
#nav li ul a:link
{
color: #0d5097;
text-decoration: none;
}
/* 已访问的链接 */
#nav li ul a:visited
{
color: #0d5097;
text-decoration: none;
}
/
* ⿏标在链接上 */
#nav li ul a:hover
{
color: #FFF;
text-decoration: none;
font-weight: normal;
background: #003399;
}
/*当⿏标在菜单栏上时，显⽰下拉菜单*/
#nav li:hover ul
{
left: auto;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。