下拉菜单（CSS）

CSS代码：

*{
 margin:0;
 padding:0;
}
#nav{
 background:#eee;
 width:600px;
 height:40px;
 margin:0 auto;    /*居中*/
 }
ul{
 list-style:none;
 }
ul li{
 float:left;
 width:90px;
 line-height:40px;
 text-align:center;
 position:relative;
 }
a{
 text-decoration:none;
 color:#000;
 display:block;

}
a:hover{
 background:#0F6;
 }    
ul li ul li{
 float:none;
 background:#eee;
 margin-top:2px;
 } 
ul li ul {
 position:absolute;
 top:40px;
 left:0px;
 display：none；    /*先隐藏*/
 }
ul li ul li a:hover{
 background:#06C;
 } 
ul li:hover ul {
 display:block;
 }

HTML代码：

<div id="nav">
  <ul>
    <li><a href="#">首页</a> </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="#">社会</a></li>
         <li><a href="#">管理</a></li>
         <li><a href="#">财经</a></li>
      </ul>
    </li>
    <li><a href="#">网页</a></li>
  </ul>
</div>

时间： 2024-11-02 23:30:44

下拉菜单（CSS）的相关文章

纯CSS实现二级导航下拉菜单--css的简单应用

思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级导航下拉菜单代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="text/html" http

下拉菜单css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{position: relative;list-style-type: none;padding: 0;margin:0; position: relative; } .nav{width:

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播（主要练习对于样式表的操作）

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

用HTML和CSS实现的下拉菜单

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>用HTML和CSS实现下拉列表</title> <style> /*导航栏的样式*/ *{margin:0;padding:0;} #nav{background-color:#eee;width:500px;height:40px;margin:

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

CSS 下拉菜单

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果. 1.下拉菜单的实现 当鼠标移入指定元素时,显示下拉菜单.代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的下拉菜单</title> 6 <style> 7 .dropdown{ 8 position:relative; 9 display:

纯css实现下拉菜单

今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好了,直接上代码:(IE6请直接越过) <!DOCTYPE html><html lang="en"><head><!-- create by pluto on 13-12-6 --><title>MENU</title>

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

下拉菜单之纯CSS实现

最近对一批学员进行网页培训,应他们要求,将这些课堂知识整理出来,供他们参考和回忆.当然,小寻哥是不愿意这么做的,毕竟白天培训+写项目,没有时间整理(当然是意味晚上整理啦).哎,但是架不住前端美女的要求,答应了就只能照办了. 这里也给其他刚入门的小虾们头参考下吧.(部分整理,毕竟有些机密还是不能外泄的) 直接上代码,你们运行下吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w