CSS的下拉菜单 - 漂亮

最新推荐文章于 2021-08-04 06:31:29 发布
最新推荐文章于 2021-08-04 06:31:29 发布
阅读量117 收藏
点赞数
原文链接：http://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154352.html
版权

如果谷歌CSS的下拉菜单，一大把，代码都差不多，但是好看的没有几个，以下是修改过的菜单，可以直接用在项目当中.

ebc8fb46564d97226b63e5e6.jpg

<!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=gb2312" />

<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>

<style type="text/css">

*{margin:0;padding:0;}  

.menu{font-size:12;position:relative;z-index:100; font-family:"宋体"}

.menu ul{list-style:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:27px;}

.menu table {position:absolute; top:0; left:0;}  

.menu ul li:hover ul,  
.menu ul a:hover ul{visibility:visible;}  

.menu ul a{display:block;background:#FFF;padding:2px 10px;margin:3px;color:#000;text-decoration:none;}

.menu ul ul li a{display:block;border:1px solid #fff;background:#DEDEDE;padding:2px 10px;margin:3px;color:#000;text-decoration:none;}

.menu a:hover{background:#fff;color:#000;border:1px solid #fff;}

.menu ul ul{}  
.menu ul ul li {clear:both;text-align:left;font-size:9;}

.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #fff;}  

.menu ul ul li a:hover{border:0;background:#fff;border-bottom:1px solid #fff;}  
</style>

</head>

<body>
<IMG src="#" />
<div class="menu">
          <ul>
              <li><a href="#">首页</a></li>
     <li><hr size=15 width="1" color="#999999"></li>
              <li><a href="#">关于我们
                  <!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <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>
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
     <li><hr size=15 width="1" color="#999999"></li>
              <li><a href="#">新闻中心  
                  <!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul>
                      <li><a href="#">公司动态</a></li>
                      <li><a href="#">行业新闻</a></li>
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>   
     <li><hr size=15 width="1" color="#999999"></li>           
              <li><a href="#">软件产品  
                  <!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul>
                      <li><a href="#">解决方案</a></li>
                      <li><a href="#">产品介绍</a></li>
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>   
     <li><hr size=15 width="1" color="#999999"></li>          
              <li><a href="#">法规标准
                  <!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul>
                      <li><a href="#">法律法规</a></li>
                      <li><a href="#">国家标准</a></li>
                      <li><a href="#">行业标准</a></li>
                      <li><a href="#">其他标准</a></li>                      
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
     <li><hr size=15 width="1" color="#999999"></li>
     <li><a href="#">事故案例</a></li>
     <li><hr size=15 width="1" color="#999999"></li>
      <li><a href="#">危险点
                  <!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul>
                      <li><a href="#">运行危险点</a></li>
                      <li><a href="#"> 检修危险点</a></li>                                       
                  </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
     <li><hr size=15 width="1" color="#999999"></li>
     <li><a href="#">网站留言</a></li>
          </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154352.html

weixin_30695195
关注
CSS 如何制作下拉菜单
CyberPlayer的博客
02-23 3604
下拉菜单 .dropdown类使用position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute）时，需要使用该类。 .dropdown-content类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置overflow:auto可实现在小屏幕上滚动...
5款漂亮的纯CSS下拉菜单
08-14
5款漂亮的纯CSS下拉菜单，欢迎下载使用。
银灰色三级CSS下拉菜单
sebastain的专栏
07-15 762
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> CSS Menu body { margin: 0; padding: 30px; backgr
三个CSS实现的下拉菜单
SmartJavaer的专栏
01-25 1069
三个CSS实现的下拉菜单ONE....................................HTML 代码: Drop Down Menu body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */.menu {display:none;}.
css3实现下拉选择框特效
10-26 223
body,ul, p{ margin: 0; padding: 0; } body{ background-color: greenyellow; color: black; } .content{ padding-
CSS 实现的下拉菜单样式
Rainy
08-29 668
首先是页面： CSS3 drop down menu #2 Home Tutorials
漂亮的CSS3弹性导航下拉菜单代码
06-05
本篇将详细讲解"漂亮的CSS3弹性导航下拉菜单代码"所涉及的知识点。 首先，CSS3中的Flexbox（弹性盒布局）是创建这种弹性菜单的基础。Flexbox允许我们轻松地处理元素的对齐、分布和大小调整，无论元素数量或屏幕尺寸...
JavaScript+CSS模拟出的漂亮下拉菜单
05-16
内容索引:脚本资源,Ajax/JavaScript,下拉菜单　JavaScript+CSS模拟出的漂亮下拉菜单，做的仓促，虚心接受批评。请注意代码的最后部分，添加这部分代码可以确保点击body区域的时候 也可以隐藏菜单，代码里我加有注释...
一款CSS3实现多功能下拉菜单（带分享按）的教程
09-25
主要为大家介绍了下拉菜单，这款菜单是基于CSS3的下拉菜单，功能非常强大，下拉菜单中不仅拥有背景色渐变的菜单项，而且还带有分享按钮的菜单项，为了让菜单更加美观，每一个菜单项都带有非常漂亮的小图标，而且在下...
css自定义select下拉框菜单【追梦版】
01-01
这个是我花了20分钟自己从设计图片，写CSS，到调整，来完成的一个自己认为很漂亮的自定义下来菜单，使用起来非常简单，只需外调一个css和一个js文件，页面中仍然按照原来的写标签，另外，只在IE6.0的版本上测试通过。貌似，图片无法上传上来，本想先让正在寻找的朋友看一看的，看来，只有先下载了，再说了，绝对漂亮，不要错过哟！
html制作好看展开列表框,css实现漂亮的下拉菜单，简单方便实用
weixin_35509395的博客
05-30 2546
本文介绍用css实现的下拉菜单，简单、方便、实用。为什么推荐用css实现的下拉菜单？因为html默认的 select 控件生成的下拉菜单样式不好控制，不够美观，还有一个致命的缺点，是在IE里 select 控件永远在最上层，其他div想覆盖显示在它上面都不行，而使用css打造的下拉菜单，不仅样式可以更加美观，设计可以随意发挥，且层的上下位置也十分好控制，不受浏览器影响。css实现的下拉菜单本文介绍...
html原生控件美化,HTML表单美化
weixin_42611310的博客
05-31 355
由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】body{margin: 0;font: 16px/20px "宋体";}.box{width: 500px;height: 100px;line-height: 100px;margin: 0 auto;border...
好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING
weixin_33060757的博客
08-04 4543
插件描述：今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的预览图width="474" height="300" title="下拉框" alt="下拉框"/>alt=""/>alt=""/>使用步骤该插件有5种表现形式，下面我就介绍一下第一种样式的实现，其它的大概一致，大家可以参...
漂亮的下拉列表 select样式 css处理 特效
peter_666的专栏
05-25 1万+
Select Demo BODY { BACKGROUND: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif } #uboxstyle .select_box { WIDTH: 250px; HEIGHT: 24px } #uboxstyle DIV.tag_select { PAD
css下拉菜单样式_CSS样式下拉菜单
cumtb2009的博客
07-28 6363
css下拉菜单样式Introduction: 介绍： As we all know that the styling website or web pages are an important aspect of web development. One must put utmost attention to the styling of their web pages or website...
css3实现下拉列表框
车联网开发的博客
11-30 5219
利用css3的新特性transition过渡特性实现下拉列表框 （js方式前面已经实现） transition 主要有四大特性 1.transition-property   过渡的属性 2.transition-duration   过渡持续的时间 3.transition-delay  过渡延迟指定的时间 4.transition-timing-function   过渡运动的曲线 ...
css隐藏下拉菜单的设置，当鼠标放上去时，自动显示下拉菜单
热门推荐
skywordphp的博客
12-07 2万+
html部分：  ....      .....      .....     css部分: #a ul li{ display:none } #a ul li:hover li{ display:list-item; } 在li里写上内容，就能实现；
html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果
weixin_39516865的博客
06-03 468
本文实例讲述了CSS使用图片美化的漂亮菜单效果。分享给大家供大家参考。具体如下：这里介绍的这个菜单很漂亮，因为每个菜单项都是调用的图片，感觉这个菜单有点华而不实，毕竟菜单太多会影响网页加载，一个菜单也没有必要为了好看而牺牲太多，根据你的需要使用哦。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值