学习CSS制作菜单列表，举一反三

最新推荐文章于 2023-12-17 11:34:32 发布
最新推荐文章于 2023-12-17 11:34:32 发布
阅读量118 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lishaohua/p/7084936.html
版权

　　1、普通的二三级菜单

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css菜单演示</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: arial, 宋体, serif;
    font-size: 12px;
}
#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
}
#nav a {
    display: block;
    width: 80px;
    text-align: center;
}
#nav a:link {
    color: #666;
    text-decoration: none;
}
#nav a:visited {
    color: #666;
    text-decoration: none;
}
#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
#nav li {
    float: left;
    width: 80px;
    background: #CCC;
}
#nav li a:hover {
    background: #999;
}
#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 180px;
    position: absolute;
}
#nav li ul li {
    float: left;
    width: 180px;
    background: #F6F6F6;
}
#nav li ul a {
    display: block;
    width: 180px;
    w\idth: 156px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}
#nav li ul a:hover {
    color: #F3F3F3;
    text-decoration: none;
    font-weight: normal;
    background: #C00;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}
-->
</style>
<script type="text/javascript">
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");
  }
 }
}
window.onload=menuFix;
</script>
</head>
<body>
<ul id="nav">
  <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>
      <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>
      <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="#">我们四111</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>
      <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>
      <li><a href="#">联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

 

2、变成水平方向

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css菜单演示</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: arial, 宋体, serif;
    font-size: 12px;
}
#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
    width: 80px;
}
#nav a {
    display: block;
    width: 80px;
    text-align: center;
}
#nav a:link {
    color: #666;
    text-decoration: none;
}
#nav a:visited {
    color: #666;
    text-decoration: none;
}
#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
#nav li {/*float: left*/;
    width: 80px;
    background: #CCC;
}
#nav li a:hover {
    background: #999;
}
#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 180px;
    position: absolute;
}
#nav li ul li {
    float: left;
    width: 180px;
    background: #F6F6F6;
}
#nav li ul a {
    display: block;
    width: 180px;
    w\idth: 156px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}
#nav li ul a:hover {
    color: #F3F3F3;
    text-decoration: none;
    font-weight: normal;
    background: #C00;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#nav li.sfhover a {
    float: left;
}
#content {
    clear: left;
}
-->
</style>
<script type=text/javascript>
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");
  }
 }
}
window.onload=menuFix;
</script>
</head>
<body>
<ul id="nav">
  <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>
      <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>
      <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="#">我们四111</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>
      <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>
      <li><a href="#">联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

 

3、弹簧式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css菜单演示</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: arial, 宋体, serif;
    font-size: 12px;
}
#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
    width: 80px;
}
#nav a {
    display: block;
    width: 80px;
    text-align: center;
}
#nav a:link {
    color: #666;
    text-decoration: none;
}
#nav a:visited {
    color: #666;
    text-decoration: none;
}
#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
#nav li {/*float: left*/;
    width: 80px;
    background: #CCC;
}
#nav li a:hover {
    background: #999;
}
#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 80px;
    position: absolute;
}
#nav li ul li {
    float: left;
    width: 80px;
    background: #F6F6F6;
}
#nav li ul a {
    display: block;
    width: 80px;
    w\idth: 56px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}
#nav li ul a:hover {
    color: #F3F3F3;
    text-decoration: none;
    font-weight: normal;
    background: #C00;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
    position: static;
}
#content {
    clear: left;
}
</style>
<script type=text/javascript>
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");
  }
 }
}
window.onload=menuFix;
</script>
</head>
<body>
<ul id="nav">
  <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>
      <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>
      <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="#">我们四111</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>
      <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>
      <li><a href="#">联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
      <li><a href="#">联系联系联系</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

 　　菜单制作的方式多种多样，这次先给大家分享这几种，如大家有好的建议和菜单效果，可以在下方回复给我，大家共同学习一下。

转载于:https://www.cnblogs.com/lishaohua/p/7084936.html

weixin_30371875
关注
CSS实现--列表布局（简单）
qq_42777804的博客
09-19 1973
效果图如下 这个如果想和上面的字体什么都一样推荐一个软件 马克鳗 可以用来测量图片的颜色 尺寸等（软件不放百度网盘了，上传资源了，也可以自己找） 用马克鳗把效果图打开 下面的工具直接进行测量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
制作一个简单HTML大学生抗疫感动专题网页（HTML+CSS）
VX_WJ88950106的博客
08-07 149
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
css 制作一个菜单列表
健康平安的活着的专栏
05-24 464
一 案例 1.页面代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="
CSS 列表
weixin_57766805的博客
02-09 2122
CSS 列表： CSS列表属性为三种 (1)设置不同的列表项标记为有序列表 (2)设置不同的列表项标记为无序列表 (3)设置列表项标记为图像 CSS列表有两种类型 (1)无序列表 - 列表项的标记使用特殊图形如小黑点、小方框等 (2)有序列表 - 列表项的标记使用数字或字母 CSS列表常见属性值描述 (1)None : 不使用项目符号 (2)Disco : 实心圆 (3)Circle : 空心圆 (4)Square : 实心方块 (5)Decimal : 阿拉伯数字 (6)Low
CSS——商品列表子菜单的实现
Bonsoir777的博客
07-20 820
本文主要讲述的是商品列表子菜单的实现过程
【CSS练习】菜单图标
qq_45888932的博客
04-23 311
练习：菜单图标
CSS写的下拉菜单_WEB标准
06-25
然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起javascript来，使用CSS制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯...
使用DIV+CSS技术设计的非遗文化网页与实现制作（web前端网页制作课作业）
专注于dreamweaver网页设计制作
08-12 295
💗 非遗文化网页设计 、等网站的设计与制作。🏷️HTML非遗文化网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序......
HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统模板
qq_38515380的博客
03-20 98
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
纯CSS实现下拉菜单导航
changerous的博客
06-14 7849
用纯CSS实现下拉菜单导航条，当鼠标hover到按钮上时，下方出现4个下拉菜单导航条。
【网页设计】基于HTML+CSS+JavaScript制作美食网站舌尖上的美食
weixin_BJ050106的博客
12-31 143
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
Html+Css:美食网页制作(大学生期末大作业详解)
A0123abc_的博客
11-20 6005
由三个div组成（.header .content .footer），header部分就只是一个标题列表+轮播图；comtent部分是川菜结束+经典菜品+友情链接组成。footer是最底端部分.顶部导航栏是用table标签内嵌a标签(也可以用li标签内嵌a标签来写),导航栏下边是由四张图片组成轮播图，第二张图.header大纲 川菜介绍用一个div左浮,川菜热点用一个div右浮,经典作品和友情链接是个div. 川菜热点:用li 标签里面包了一个span和文字,span里面写数字并为其设置样式， 经典
web网页设计：中华美食(HTML+CSS) 美食静态网页制作 WEB前端美食网站设计与实现
最新发布
html精品源码
12-17 626
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
css做的菜單
C#,SQL,Castle,Hibernate,MVC,Spring.net
01-17 431
"http://www.w3.org/TR/html4/loose.dtd">menu009body { margin:0; padding:0;} ul#menu009{ margin:0; padding:0; list-style-type:none; width:auto; font-size:12px; height:36px; font-family:Tahoma, Verdana,
【CSS学习笔记十二】菜单制作
记得提醒我去学习
08-23 182
一.水平菜单 灵活应用之前所学到的知识，注意点都写着注释里了。 实例： <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; width:100%; /*水平*/ ba...
html布局+css 制作简单的产品分类列表
qq_69444691的博客
04-13 1813
本篇文章主要是博主的作业
CSS之——设置列表样式和创建导航菜单
weixin_39941298的博客
07-24 3060
一、设置列表的符号  list-style-type: 属性；//设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试：circle，disc,decimal。。。。     二、设置列表图片符号 为ul,ol设置图片符号 ul,ol{     list-style-image: url("li.png") } 代码： &l...
CSS如何实现一个既简单又漂亮的列表
ting2909的博客
09-03 1443
import React, {Component} from ‘react’ import ‘./App.css’ class App extends Component{ render() { return ( 我是列表项 我是列表项 ); } } export default App 复制代码 APP.css 复制代码 .mylist{ padding-top: 200px; padding-left: 300px; background-color: #EEE; height
创建美观的CSS菜单资源与教程
除了查看示例，学习教程也是掌握CSS菜单制作的关键。以下是一些推荐的CSS菜单教程： 1. http://www.cssplay.co.uk/menus/index.html cssplay是一个非常受欢迎的CSS范例集合站，包含多种创新的CSS菜单设计，适合初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值