网页制作怎么用css制作菜单，这样的CSS菜单怎么做的

本文目录一览

1，这样的CSS菜单怎么做的
2，如何使用HTML和CSS制作下拉菜单
3，如何用css制作下拉菜单

1，这样的CSS菜单怎么做的

一个DIV里包含多个A，DIV设底边, A标签往下margin-bottom:-1px;

http://www.zcool.com.cn/gfx/ZODY0MDg=.html 这个源码你可以自己下载下来看看做参考你要的这种效果大多都是CSS+DIV 弄出来的可以上站酷就是我刚才给你的这个网站看看另外不懂的话可以搜索百度：CSS横向导航菜单源码这样就可以了！

那个直线应该是外层容器比如ul的下边框，不会是hr

这样的CSS菜单怎么做的

2，如何使用HTML和CSS制作下拉菜单

首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。使得鼠标移到链接上面时有明显的颜色变化。截止到上一步我们的一级菜单栏已经制作完成，接下来我们需要制作二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以制作二级菜单了。关于二级菜单的代码以及css样式，和在浏览器中的显示效果如下图所示。大家可以看到，这是静态的二级菜单，二级菜单会一直在网页当中显示，那么我们应该怎样让其先隐藏然后鼠标滑过一级菜单后再显示呢？其实，这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认情况下设置二级ul的display属性为none；鼠标滑过时dispaly属性为block。这样一个二级菜单就制作完成了，想让其他的一级菜单下面也有二级菜单显示，我们只需要复制相应的代码就可以了。河南新华电脑学院网络运营协会为您解答

如何使用HTML和CSS制作下拉菜单

3，如何用css制作下拉菜单

纯CSS的下拉菜单，我理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden; ）。大致意思就是如此。我对这些也不能说特别精通。网上倒是有很多倒子的。贴一段网上摘的纯CSS下拉菜单（二级）<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>利用float制作兼容ie6纯css下来菜单</title> <style type="text/css"> * ul a:hover .nav .nav dd .nav dd a .nav a:hover .nav dd ul .nav dd li a .nav dd li a:hover </style> </head> <body> <dl class="nav"> <dd><a href="">首页</a></dd> <dd> <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> </dd> <dd> <a href="">新闻动态</a> <ul> <li><a href="">国内新闻</a></li> <li><a href="">国外新闻</a></li> </ul> </dd> <dd> <a href="">产品展示</a> <ul> <li><a href="">111</a></li> <li><a href="">222</a></li> </ul> </dd> </dl> </body> </html>

http://www.zztuku.com/Html/Menu/20130311_7662.htmlhttp://www.zztuku.com/Html/Menu/20130311_7661.html戳这里！

做下拉菜单本来就不用jsp，你是想说只用css不用javascript(js)吧?你要求很怪，不用js又要用ONMOUSEOVER，用这个就是js了。百度：纯css下拉菜单

设置子菜单项的样式分为3步 1、首先对每个子菜单项，也就是dd元素进行常规设置，包括内外边距清零，设置文字颜色等。/* 设置菜单项的dd */#menu li dd } 2、为了使最后一个dd的下端有一条分割线，我们设置它为1px的红色下边框，这就使之与上边框的红色分割线想对应了，也告诉浏览者这是一块可以点击的区域。#menu li dd.last border-bottom:1px solid #b00;} 上面的代码也新增了一个last的类，因此我们必须在对应的html代码中最后一个dd指定class="last"。css高级教程 3、设置子菜单的链接的样式#menu li dd a, #menu li dd a:visited display:block;color:#fff;text-decoration:none;padding:5px 20px;background: #0000ff;}此时，我们在浏览器就可以看到下拉菜单的样式已经可以显示了。二、设置鼠标经过时的响应最后一条规则，让鼠标滑过有下拉项的时候，显示下拉菜单。当然我们实际设置的是：如果某一个下拉菜单的父级元素（一级菜单项）被鼠标滑过，那么就让该下拉菜单可以被看见：#menu li dd background: #0000ff;}最后我们就可以运行整个文件实现效果了，建站教程网建议大家一起跟着步骤一步一步的做哦。

如何用css制作下拉菜单