经典的蓝色CSS下拉菜单

最新推荐文章于 2022-08-13 13:38:19 发布
最新推荐文章于 2022-08-13 13:38:19 发布
阅读量781 收藏
点赞数
分类专栏： HTML/CSS/JS 文章标签： css function border float 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mane_yao/article/details/5411056
版权

<html>
<title>经典的蓝色CSS下拉菜单</title>
<style>
*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;} 
#nav { line-height: 20px; list-style-type: none; margin-top:5px;}
#nav a { display: block; width: 77px; text-align:center; font-size:12px;}
#nav a:link  { color:#FFF; text-decoration:none;margin:0;}
#nav a:visited  {color:#FFF;text-decoration:none;margin:0;}
#nav a:hover {color:#C00;text-decoration:none;}
#nav li {float: left;}
#nav li a:hover{background:#FFFFFF;}
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}
#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}
#nav li ul a:link  {color:#0d5097; text-decoration:none;} 
#nav li ul a:visited  {color:#0d5097;text-decoration:none;} 
#nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<body>
<script type=text/javascript>
<!--
function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].οnmοuseοver=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].οnmοuseοut=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),
"");
        }
    }
}
window.οnlοad=menuFix;
//--></script>
<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px"><A href="http://www.codefans.net">主站索引</A></LI>
<LI><A href="#">新闻中心</A>
<UL>
<LI><A href="#">·新闻中心1</A></LI>
<LI><A href="#">·新闻中心3</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>
<UL>
<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>
<UL>
<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>
</div>
</body>
</html>

mane_yao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS/HTML5简单大方的蓝色CSS分页样式
千世丶希
11-21 4933
固定宽度实现页面自适应居中说明部分css代码解释Index代码演示图 说明 演示效果分辨率为1980x1080分辨率效果 width设置为1336px使在分辨率为1366x720的浏览器不出现左右移动框 使用margin来控制浮动 部分css代码解释 #model14 ul { padding-inline-start: 0 !important; /* 设置ul的开头距离为...
蓝色风格简单的下拉导航菜单js特效jquery效果
09-06
蓝色风格简单的下拉导航菜单js特效jquery效果 展示页面 http://www.whkge.com/jsview/0906b/
很漂亮的蓝色CSS下拉菜单
weixin_34082177的博客
05-29 165
代码简介： 纯CSS代码实现比较经典的蓝色风格下拉菜单，最多支持两级，适用于各种企业网站，新闻资讯类网站，效果挺棒的，不是吗？虽然没有用到过多的修饰，但给你的感觉清新、大方、简洁，符合现代网站的特点。 代码内容： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>很漂亮的蓝色C...
简单蓝色CSS网页模板
11-24
简单蓝色CSS网页模板 蓝色 商务 网页 清新 简约 模板 企业 商业 公司 设计 主页 HTML DIV+CSS 模板下载
非常好看的css布局-深蓝色
11-29
非常好看的css布局-深蓝色 修改代码非常容易
纯CSS3制作蓝色滑动下拉菜单
04-06
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个蓝色的滑动下拉菜单。这个技术在网页设计中非常常见，因为它提供了一种优雅且互动性良好的方式来展示网站的多级导航结构。CSS3是层叠样式表的最新版本，它引入...
纯CSS3制作蓝色滑动下拉菜单.zip
07-11
"纯CSS3制作蓝色滑动下拉菜单"就是一个利用CSS3技术实现的高效、美观的导航菜单解决方案。这个代码示例无需JavaScript，仅依赖于CSS3的新特性，如伪类、过渡效果和选择器，来实现鼠标悬停时下拉菜单的平滑展开和收起...
CSS3蓝色宽屏二级下拉菜单
08-02
本教程将详细探讨如何利用CSS3实现一个蓝色宽屏的二级下拉菜单，提升网站导航的用户体验。 首先，二级下拉菜单是网页导航栏中的常见元素，它允许用户在主菜单项下进一步探索子分类。这种结构有助于组织大量链接，使...
CSS3蓝色宽屏二级下拉菜单DEMO演示
weixin_33919941的博客
10-19 203
2019独角兽企业重金招聘Python工程师标准>>> ...
基于CSS制作天蓝色导航菜单
09-24
主要介绍了基于CSS制作天蓝色导航菜单 ，效果非常清新，时尚大方，为网站增添亮点，感兴趣的小伙伴们可以参考一下
海洋淡蓝色css模板
12-01
海洋淡蓝色css模板
jQuery蓝色下拉导航菜单
11-19
jQuery蓝色下拉导航菜单 jQuery蓝色下拉导航菜单 jQuery蓝色下拉导航菜单 jQuery蓝色下拉导航菜单 jQuery蓝色下拉导航菜单
CSS颜色
cherrylqq9的博客
08-31 2023
CSS 颜色 由红（RED），绿（GREEN），蓝（BLUE ）组合 颜色值 CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF） 3个双位数字的十六进制值写法，以＃符号开始。 十六进制颜色 ＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色） 所有值必须介于0和FF之间。 #ff0000 —红色 #00ff00 —绿色 #0000ff —蓝色 #000000 —黑色 #FFFFFF —
css颜色
课前的博客
10-26 621
css颜色
蓝色的css时间轴样式代码
ICode联盟
08-13 153
css时间轴样式代码，蓝色的timeline时光轴布局。
计算机怎么给表格添加蓝色边框,excel表格蓝色边框锁定|excel如何选择多个下拉菜单中的选项？...
weixin_42628280的博客
07-27 3146
excel电子表格中怎样设置多个下拉框选项1.先个列表把你要的选项维护上去，如z1：z51.饮品2.糕点3.主食4.水果5.汤6.你需要插入下拉格子。数据(data)-->数据有效性(datavalidation)7.在settings上面选list，然后source上面选你在1维护的列表。另外，如果你的选项是固定的，你也可以省掉1，第三步的source维护为饮品,糕点,主食,水果,汤注意中...
Csdn Blog模板CSS代码（7）:蓝色天空
零度空间
11-12 4716
 模板预览：点击查看完整图像换肤步骤： 进入后台，打开配置选项 皮肤选择blue 将下面的css代码copy至自定义css文本框，最后保存 css代码：<!--google_ad_client = "pub-8062744370448170";google_ad_width = 250;google_ad_height =
css中设置背景色为蓝色,CSS的背景图像URL更改颜色变成蓝色在IE11中不起作用(css div background-image url changing color to tinted blu...
weixin_39831493的博客
08-04 824
CSS的背景图像URL更改颜色变成蓝色在IE11中不起作用(css div background-image url changing color to tinted blue not working in IE11)我有一个div，我只想让外部图像变成蓝色。 此代码在所有浏览器中都可以正常工作，但IE Edge和以前版本都可以。有一件事是我需要用CSS来解决这个问题，即时响应。动态地将这个htm...
css 下拉菜单显示在最上层
最新发布
05-20
可以通过设置 CSS 的 `z-index` 属性来实现下拉菜单显示在最上层。`z-index` 属性用于控制元素的堆叠顺序，数值越大的元素显示在越上层。 例如，假设下拉菜单的 HTML 代码如下： ```html 下拉菜单 选项1 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值