方法/步骤1
首先我们打开dreamweaver，创建一个名为nav的div，用<ul><li>标签插入需要的内容，创建一个一级菜单，例如： <div class="nav"> <ul> <li><a href="#">栏目一</a></li> <li><a href="#">栏目二</a></li> <li><a href="#">栏目三</a></li> <li><a href="#">栏目四</a></li> <li><a href="#">栏目五</a></li> </ul> </div> 我们用浏览器打开，预览一下效果，如下图
这样一个纵向的菜单就建好了，可是这样子也太难看了，而且大家也可以发现每行栏目前面都有一个黑色的小点，而且周边也有很大的空隙。这是由于默认样式造成的，所以我们首先清楚默认样式，如下： *{ margin:0; padding:0;}这是消除默认的空隙 ul,li{ list-style:none:}这是消除<ul><li>标签前面的小黑点 a{ text-decoration: none;}这是消除<a>标签默认下划线 下来，我们在添加其它样式，简单美化下我们创建的纵向菜单，代码如下： .nav{ width: 100px; border: 1px solid #CCC; border-bottom: none;} .nav ul li{ background: #eee; text-align:center; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative;} .nav ul li a{ color:#333;} .nav ul li a:hover{ color:#f00;} 这些样式就不做一一介绍了，相信大家都看得懂，非常简单。我们打开浏览器预览下效果
到这里，一级纵向菜单已经创建好了，下来我们<ul><li>标签给栏目添加二级菜单，为了更好的对比效果，我们只给前三个栏目添加二级内容，代码如下： <div class="nav"> <ul> <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> </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> </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> </ul> </li> <li><a href="#">栏目四</a></li> <li><a href="#">栏目五</a></li> </ul> </div> 我们用浏览器预览下效果
现在的页面看起来太乱了，不要着急，现在我们就添加样式进行修改，首先给<li>标签下的<ul>标签添加绝对定位，再让它距左100px这样二级菜单和一级菜单就不会重叠到一块了，因为<li>标签已经使用了相对定位，当<li>标签下的<ul>标签使用绝对定位时，<ul>标签就会相对于<li>标签的左上角移动。也就是说 父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角 样式代码如下： .nav ul li ul {position: absolute;left: 100px;top: 0px;width: 100px;border: 1px solid #ccc;border-bottom: none;｝ 我们用浏览器打开预览
怎么看起来还是有点乱呢，其实这就是正确的显示效果，接下来，我们利用hover制作鼠标滑动效果，将二级栏目隐藏，当鼠标划过时再让其显示。 首先我们给<li>标签下的<ul>标签添加display: none;使其隐藏 接着在让滑动到<li>标签时，将它的display改为block，使其显示 代码如下： .nav ul li ul {position: absolute;left: 100px;top: 0px;width: 100px;border: 1px solid #ccc;border-bottom: none; display:none:｝ .nav ul li:hover ul { display:block} 我们预览下效果
至此我们的纵向二级下来菜单就制作完成了，这么简单的代码之所以写的这么复杂，就是为了让大家能够一次记住，方便以后使用。感谢大家的浏览