一个漂亮的CSS菜单

最新推荐文章于 2024-05-23 13:03:42 发布
最新推荐文章于 2024-05-23 13:03:42 发布
阅读量336 收藏
点赞数
分类专栏： 页面制作 文章标签： CSS IE JavaScript XHTML HTML ViewUI
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu - Vertical</title>
<style type="text/css">
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}

/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
 margin: 0;
 border: 0 none;
 padding: 0;
 width: 160px; /*For KHTML*/
 list-style: none;
}

ul#navmenu li {
 display: block !important; /*For GOOD browsers*/
 display: inline; /*For IE*/
 position: relative;
}

/* Root Menu */
ul#navmenu a {
 border: 1px solid #FFF;
 border-right-color: #CCC;
 border-bottom-color: #CCC;
 padding: 0 6px;
 display: block;
 background: #EEE;
 color: #666;
 font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
 height: auto !important;
 height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
 background: #CCC;
 color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
 display: none;
 position: absolute;
 top: 0;
 left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
 display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
 display: block;
}

</style>
<script type="text/javascript">
 <!--
navHover = function() {
  var lis = document.getElementById("navmenu").getElementsByTagName("LI");
  for (var i=0; i<lis.length; i++) {
    lis[i].οnmοuseοver=function() {
      this.className+=" iehover";
    }
    lis[i].οnmοuseοut=function() {
      this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", navHover);
-->
</script>
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<hr />
<ul id="navmenu">
 <li><a href="#">Blog</a></li>
 <li><a href="#">Work +</a>
 <ul>
 <li><a href="#">Websites +</a>
 <ul>
   <li><a href="#">qrayg</a></li>
 <li><a href="#">qArcade</a></li>
 <li><a href="#">qLoM</a></li>
 <li><a href="#">qDT</a></li>
 </ul>
 </li>
 <li><a href="#">Pen and Ink</a></li>
 <li><a href="#">Free Interfaces</a></li>
 </ul>
 </li>
 <li><a href="#">Learn +</a>
 <ul>
 <li><a href="#">Fireworks +</a>
 <ul>
 <li><a href="#">aquaButton</a></li>
 <li><a href="#">aquaButton2</a></li>
 <li><a href="#">waterDrop</a></li>
 <li><a href="#">lightFX</a></li>
 <li><a href="#">lightFX2</a></li>
 </ul>
 </li>
 <li><a href="#">CSS +</a>
 <ul>
 <li><a href="#">footerStick</a></li>
 <li><a href="#">spriteNav</a></li>
 <li><a href="#">@import</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Info</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</body>
</html>

iteye_906
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂亮的菜单效果（div+css）
09-12
绝对好看，绝对有用,简单的页面设计，纯div+css的菜单效果，不满意不要分
CSS 好看的菜单
02-21
CSS 好看的菜单、导航 ,两面有连个JAR ，第一个是一级菜单。第二是多级菜单。第一个 如果是JSP 请修改HEIGHT 40
好看的css菜单
weixin_33998125的博客
11-04 82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
css扇形菜单动画效果
最新发布
前端程序媛_Ying博客
05-23 480
扇形菜单动画效果CSS
9款精美别致的CSS3菜单和按钮
weixin_33860722的博客
04-17 785
1、超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单，比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画，效果都很漂亮。今天我们要再分享一款更酷的CSS3 3D立体菜单，这款菜单侧躺在页面上，每个菜单项都有不错的小图标。 在线演示 源码下载 2、纯CSS3立体动画菜单 菜单项按下有内阴影 这次小编...
17种漂亮css导航菜单
09-27
用css定义的17种网页导航菜单。。。值得学习哦
漂亮桔色css导航菜单特效代码
03-20
在这个主题中，我们将探讨如何使用CSS来创建一个具有桔色主题且具有动态效果的导航菜单。 首先，我们需要理解导航菜单在网页设计中的作用。导航菜单是网站的重要组成部分，它帮助用户快速找到他们感兴趣的内容。一...
一款漂亮的CSS导航菜单
05-12
此外，对于初学者来说，研究这个CSS导航菜单的源代码是一个很好的学习机会，可以了解如何使用浮动、定位、伪类（如`:hover`）等CSS技术来实现交互效果，如鼠标悬停时的高亮显示。 总的来说，这款“一款漂亮的CSS...
CSS使用图片美化的漂亮菜单效果
12-03
本实例展示了如何利用CSS图片美化一个漂亮的菜单，虽然这样的菜单可能因为大量使用图片而显得有些华而不实，可能会增加网页的加载时间，但在适当的情况下，这种美化方法能够提升网站的视觉吸引力。 首先，我们要...
超漂亮的仿MAC的CSS菜单特效代码
03-20
本文将深入探讨“超漂亮的仿MAC的CSS菜单特效代码”这一主题，这是一种模仿苹果MAC操作系统界面风格的菜单设计，它以其优雅、简洁的外观和流畅的动画效果吸引了许多设计师和开发者。 首先，CSS（Cascading Style ...
又一个漂亮的导航栏的下拉菜单
10-30
又一个漂亮的导航栏的下拉菜单 在网页设计中，导航栏是非常重要的一部分，一个漂亮的导航栏可以提高用户体验和网站的整体美观性。今天，我们将讨论如何创建一个漂亮的导航栏的下拉菜单。 首先，让我们来看看 HTML ...
20个超漂亮实用的纯CSS web2.0导航菜单模板
12-02
20个超漂亮实用的纯CSS web2.0导航菜单模板
一款纯css实现的漂亮导航菜单(也适用于个人中心)
09-25
之前已经分享很多css3实现的导航菜单，今天再分享一款纯css实现的漂亮导航，这款也是适合放在个人中心。还带来图标，效果不错。需要的朋友可以参考下
9种漂亮的CSS竖向菜单美化样式
06-08
9种漂亮的CSS竖向菜单美化样式，保证让您的网站耳目一新
html css 两款超级漂亮实用的CSS导航栏
02-11
html css 两款超级漂亮实用的CSS导航栏
9个样式漂亮的WEB网站CSS菜单.rar
07-10
9个样式漂亮的WEB网站CSS菜单，有圆角、方角、虚线类、深蓝色、暖色等多种风格样式，只有一个HTML文件，每款菜单的样式和实现 代码都在这一个文件里。
精选10款超酷的HTML5/CSS3菜单
weixin_34235371的博客
03-20 441
今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧。 1、CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会...
css3实现的精美菜单
前端岚枫
10-18 1296
下拉菜单是我们做前端经常遇到的一些案例，今天学习了一下一个博客做的案例，例子如下： 源代码下载地址  css部分代码 ul {     font-family:Arial, Helvetica, sans-serif;     background:#ccc;     background:-webkit-gradient(linear, left top, l
帮我用html加css写一个漂亮的下拉列表
03-24
下面是一个简单的HTML和CSS代码，可以用于创建一个漂亮的下拉菜单： ``` <!DOCTYPE html> /* 样式化下拉菜单 */ .dropdown { position: relative; display: inline-block; } /* 下拉菜单内容 */ .dropdown-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值