用css创建的二级菜单

来源：互联网发布：-3的源码编辑：程序博客网时间：2024/05/18 06:07

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link href="company.css" rel="stylesheet" style="text/css"></head><body><div class="navation"><ul><li>网站首页<div><div><a href="#">门户</a></div><div><a href="#">技术</a></div><div><a href="#">园地</a></div></ul></li></ul></div></body></html>

.navation{width:400px;height:40px;border:1px solid 400px;}.navation>ul>li{float:left;margin:4px 0px 4px 0px;text-align:center;vertical-align:center;list-style:none;display:inline;}.navation>ul>li>div{position:absolute;display:none;}.navation>ul>li>div>div{float:none;margin:1px 1px 1px 1px;list-style:none;border:4px solid blue;background:red;}.navation>ul>li:hover div{display:block;}

这里的主要思想是就是把二位菜单装在一个容器里面，一般是display：none；然后在显示的时候display:block;

其实这里用ul和li好一些我为了大家好理解用了 div和div就这么简单的东西。

0 0