银灰色三级CSS下拉菜单

最新推荐文章于 2021-05-31 14:35:06 发布
最新推荐文章于 2021-05-31 14:35:06 发布
阅读量737 收藏
点赞数
分类专栏： css 文章标签： css border float function xhtml html

<!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</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;
}

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px;
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul li {
float: none;
display: block !important;
display: inline;
}

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

ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}

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;
}

ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

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;
}

ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

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,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

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 - Horizontal</h1>
<hr />
<ul id="navmenu">
<li><a href="My">http://www.codefans.net/">My Blog</a></li>
<li><a href="#">Work +</a>
<ul>
<li><a href="#">Websites +</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">Extjs</a></li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="/">Learn+</a>
<ul>
<li><a href="/">CSS +</a>
<ul>
<li><a href="#">EXTJS</a></li>
<li><a href="#">SpriteNav</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Messages</a></li>
</ul>
</body>
</html>

 

css网站地址：http://www.codefans.net/jscss/code/879.shtml

sebastain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
垂直下拉菜单
xinzhelantian的专栏
02-22 599
垂直下拉菜单 ul{ list-style:none; padding:0px; } ul li{width:100px;} ul li a{ text-decoration:none; background:#0099FF; color:white; height:40px; line-height:40p
好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING
weixin_33060757的博客
08-04 4473
插件描述：今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的预览图width="474" height="300" title="下拉框" alt="下拉框"/>alt=""/>alt=""/>使用步骤该插件有5种表现形式，下面我就介绍一下第一种样式的实现，其它的大概一致，大家可以参...
5款漂亮的纯CSS下拉菜单
08-14
5款漂亮的纯CSS下拉菜单，欢迎下载使用。
CSS的下拉菜单 - 漂亮
weixin_30695195的博客
08-26 108
如果谷歌CSS的下拉菜单，一大把，代码都差不多，但是好看的没有几个，以下是修改过的菜单，可以直接用在项目当中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml...
下拉菜单（垂直）
smallMirror_的博客
10-26 1397
css<style> .icon{ width: 15px; height: 15px; } .one{ background-color: burlywood; } .two{
CSS3实现银灰色动画效果的导航菜单代码
12-13
本文实例讲述了CSS3实现银灰色动画效果的导航菜单代码。分享给大家供大家参考。具体如下： 这是一款使用CSS3技术实现的导航菜单，欢迎大家参考，使用了几张背景图片，使用时请按路径扒下来就可以了。 运行效果截图...
js实现精美的银灰色竖排折叠菜单
12-02
在本文中，我们将探讨如何使用JavaScript来实现一个精美的银灰色竖排折叠菜单。这个菜单设计用于网页的左边，能够提供优雅的用户交互体验。首先，我们从HTML结构开始： ```html <!DOCTYPE html> ; charset=utf-8...
JS实现带有3D立体感的银灰色竖排折叠菜单代码
10-23
主要介绍了JS实现带有3D立体感的银灰色竖排折叠菜单代码,可实现基本的JS响应鼠标事件动态展开与折叠菜单栏的功能,具有一定参考借鉴价值,需要的朋友可以参考下
CSS实现垂直下拉菜单
qq_43575703的博客
04-02 1054
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS实现垂直下拉菜...
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
利用CSS实现酷炫的下拉框特效
12-29
首先来看看要实现的效果图 想要制作这么一个效果还是比较麻烦的，但是代码并不难理解。 首先，来看看 Html 代码。 XML/HTML Code复制内容到剪贴板 <div u00a0class=container>       <div u00a0class=heading>           <h2>Custom Select</h2>       </div>          <div u00a0class=select>           <p>Please select</p>           <ul>          
好看的js+css下拉菜单
08-28
好看的js+css下拉菜单
美化的下拉框
05-13
结合css3属性写出的伪下拉，比较美化、简洁、漂亮 没有考虑ie目前只是针对火狐和谷歌
精美漂亮的实用div+css模仿select下拉框控件
03-01
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
CSS自定义select下拉选择框的样式(不用其他标签模拟)
02-01
怎么自定义select下拉选择框的样式，使用纯CSS实现，把浏览器默认的样式覆盖掉还是有其他的方法，select靠纯CSS是不能解决这个自定义样式问题，下面为大家讲解下CSS实现的思路
html原生控件美化,HTML表单美化
weixin_42611310的博客
05-31 340
由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】body{margin: 0;font: 16px/20px "宋体";}.box{width: 500px;height: 100px;line-height: 100px;margin: 0 auto;border...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
weixin_39726131的博客
12-03 532
很多小伙伴都不清楚CSS3是做什么？用途是什么？接下来我就给展示一个css3制作一个炫酷下拉框。其实不只是这些，还有很多。CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表2.然后发现...
css下拉框
weixin_43913877的博客
11-20 5124
css下拉框 在逛淘宝京东等网站时经常会有这种效果——鼠标悬浮会显示隐藏元素，我们称为下拉框，效果如下 下面介绍实现下拉框的原理以及方法 原理1： ① 触发鼠标悬浮状态的元素和隐藏的元素为兄弟关系，即必须拥有相同的父元素 ②将伪类：hover绑定给父元素，让父元素触发鼠标悬浮事件 ③隐藏的元素使用绝对定位，父元素设置相对定位，使其相对于父元素定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset
CSS垂直树形下拉菜单的制作方法
axl19530209的专栏
01-24 688
内容提要：CSS垂直树形下拉菜单的制作方法，第一步:建立菜单，首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么？其实只要一路写下去就OK了。 　　 第一步:建立菜单 　　 首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么?其实只要一路写下去就OK了。 　　以下是引用片段：         Home       Ab
css 白色金属管渐变背景色
最新发布
08-18
要实现CSS中的白色金属管渐变背景色效果，可以使用CSS的线性渐变（linear-gradient）属性。线性渐变可以在背景中创建一个从一个颜色到另一个颜色的平滑过渡。 以下是实现白色金属管渐变背景色的示例代码： ```css background: linear-gradient(to bottom, #FFFFFF, #C0C0C0); ``` 在这个示例中，我们使用线性渐变的方式从上到下创建了一个从白色（#FFFFFF）到银灰色（#C0C0C0）的渐变效果。你可以根据需要调整颜色值和渐变方向来达到想要的效果。 希望这个回答能够帮到你！<span class="em">1</span> #### 引用[.reference_title] - *1* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值