一个标准弹出菜单（css版）

最新推荐文章于 2024-09-13 15:41:23 发布
最新推荐文章于 2024-09-13 15:41:23 发布
阅读量435 收藏
点赞数
文章标签： css class ie browser list menu

<style type="text/css">
/* common styling */
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#e9e9c7;}
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#000; background:#e9e9c7;}
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li a:hover ul.left {left:-105px;}
.menu ul li a:hover ul li a:hover ul.left {left:-210px;}
</style>
<![endif]-->

<body>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="menu">
  <ul>
    <li><a class="hide" href="../menu/index.html">DEMOS</a>
        <!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
          <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
          <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
          <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
          <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
              <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
  <table><tr><td>
  <![endif]-->
              <ul>
                <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
                <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
              </ul>
            <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->
          </li>
          <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
          <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
          <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
          <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
          <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="index.html">MENUS</a>
        <!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
          <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
          <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
          <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
          <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
          <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
          <li><a href="circles.html" title="circular links">circular links</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
        <!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
          <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
          <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
          <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
          <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="../boxes/index.html">BOXES</a>
        <!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
          <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
          <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
          <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
          <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
          <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
          <li><a href="circles.html" title="circular links">circular links</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
        <!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
          <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
          <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
          <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
          <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
          <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
          <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
          <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
          <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="../ie/index.html">EXPLORER</a>
        <!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
        <ul>
          <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
          <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
          <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
    <li><a class="hide" href="../opacity/index.html">OPACITY</a>
        <!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
        <ul class="left">
          <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>
              <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
  <table><tr><td>
  <![endif]-->
              <ul class="left">
                <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
                <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
                <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
              </ul>
            <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->
          </li>
          <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
          <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
          <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
          <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
        </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </li>
  </ul>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body> 

泰坦之锤
关注
三级dropdown弹出菜单
08-10
网页三级下拉菜单,静态的html模式的.可以真接看到效果.
div+css制作的弹出菜单(标准且无js)
huangyinkuck
12-23 552
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">三级dropdown弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0
div+css制作的菜单
博客
05-21 720
.Menu { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }.Menu ul { list-style:none; margin:0px;}.Menu li { float:left; padding-left:8px; } //如果要显示竖型列表菜单请把f
[DIV+CSS]三级dropdown弹出菜单
09-24
三级导航菜单，页首放 纯DIV+CSS效果，适合栏目较多，层次较深的网站
利用transform实现一个纯CSS弹出菜单的示例代码
11-19
在本文中，我们将探讨如何利用CSS3的`transform`属性实现一个纯CSS的弹出菜单。这种技术不仅简化了代码，还提高了性能，因为避免了对JavaScript的依赖。 首先，让我们回顾一下`transform`属性的基本概念。在CSS中，...
无js5款纯div+css制作的弹出菜单标准
10-30
无JavaScript的纯CSS弹出菜单是一种利用HTML和CSS来创建交互式下拉菜单的技术，它在不依赖JavaScript或任何其他脚本语言的情况下提供了一种优雅的解决方案。这种技术特别适用于那些需要快速加载、对JavaScript支持...
符合标准的div css制作的弹出菜单
12-08
首先，我们来看第一个示例，一个基础的二级Dropdown弹出菜单。这个菜单的设计遵循了XHTML 1.0 Transitional标准，确保了跨浏览器的兼容性，支持包括IE和Mozilla在内的各种浏览器。通过定义DOCTYPE声明，我们可以确保...
CSS网页布局入门教程13：下拉及多级弹出式菜单
10-30
最后，为二级菜单的链接添加内边距和分隔线，并移除最后一个菜单项的底部边框，以提供整洁的视觉效果。 多级菜单的实现可以通过类似的方法，只需在CSS中增加更多的嵌套选择器，处理更深层次的ul元素。例如，可以...
DIV CSS 布局定位 实例 菜单导航 详解
eagleking012的专栏
09-22 501
为什么要用Div Css可以简单的作如下解释： 当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都不是用来布局用的,现在我们要使TABLE重新开始显示它自己的意义:表示表格数据.所以TABLE根本不应该...
css+div纵向导航菜单及二级弹出菜单
WinBing的博客
04-06 2473
功能介绍，当鼠标放在一级菜单那里时，弹出二级菜单。结尾有效果图。 本功能重点1（二级菜单的位置）： 首先需要一级菜单的li里写position: relative;做一个相对定位二级菜单。 然后，在二级菜单里面写position: absolute;此时二级菜单的盒子的位置是与一级菜单重叠。所以，要做一个绝对定位，并设置其左边距为26px（一级菜单的宽度为26px） 本功能重点2（二级菜单显示）： 首先，默认情况将不显示二级菜单，display:none; #menu ul li:hover ul{ dis
下拉菜单（Dropdown）
y4418的博客
05-18 3829
概括：弹出菜单是可触发的、上下文叠加显示链接列表和别的内容。它们可以与Bootstrap内置的弹出菜单JavaScript插件交互。通过点击触发，而不是通过鼠标悬停悬浮，这是一种设计思维。 单一按钮的下拉菜单 1.任何一个.btn块都可以定义变更为下拉菜单，下面是两个使用<button>元素做下拉菜单的示例。 2.点击这个按钮的话就会弹出下拉框以下<a>标签里的字段。 3.当然除了用<button>元素来做下拉框之外还可以使用<a&gt...
30种菜单导航（DIV+CSS）设计实现
最新发布
weixin_29301059的博客
09-13 1515
本文还有配套的精品资源，点击获取 简介：网页设计中，菜单导航是关键的页面布局组件，本资源提供了30种使用 <div> 元素和CSS实现的不同风格和功能的菜单导航实例。从基础的水平和垂直菜单到复杂的动态效果菜单如弹出式和手风琴菜单，每种类型都详细说明了实现方法。这些导航菜单在设计上既注重视觉效果，又增强交互性，为不同类型的网站提供了多样的导航解决方案...
combobox之下拉宽度自适应
weixin_30521161的博客
03-12 996
效果对比 先看下优化前后的效果，再看实现过程. 优化前 优化后 从上图中可看到，combobox优化后可以自适应不同长度的字符串，保证每个字符串都能够显示完整。 实现过程 当我们触发CBN_DROPDOWN事件时，不再使用默认的实现，而是利用消息反射机制，重新计算下拉列表...
深度解析VC中的消息传递机制
kinghzking的专栏
02-12 839
<br /><br />摘要：Windows编程和Dos编程，一个很大的区别就是，Windows编程是事件驱动，消息传递的。所以，要学好Windows编程，必须<br />对消息机制有一个清楚的认识，本文希望能够对消息的传递做一个全面的分析。<br />一、什么是消息？<br />消息系统对于一个win32程序来说十分重要，它是一个程序运行的动力源泉。一个消息，是系统定义的一个32位的值，他唯一的定<br />义了一个事件，向Windows发出一个通知，告诉应用程序某个事情发生了。例如，单击鼠标、改变窗口尺
vue iview Menu改造为五边形菜单
heerey525
02-25 325
如下图所示： 代码展示： <template> <Row class="shiftView"> <Col class="shiftLeft"> <Menu ref="menuListBoxRef" :active-name="curTab" theme="light" width="auto" @on-select="handleClick" &gt
几种css菜单样式
weixin_34279246的博客
09-29 552
竖直排列表菜单（图）<style text="text/css">#nav a{ font-size:12px; height:32px; display:block;}#nav a:link,a:visited{ background:url(bj.gif) no-repeat; color:#FFFFFF;...
使用DIV+CSS实现下拉列表菜单
Java海洋
01-19 5784
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><br /> <html xmlns="http://www.w3.org/1999/xhtml "><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html;
Combox对象的 CBN_SELCHANGE事件
lyzhm的专栏
03-29 4719
 今天发现响应一个Combox的CBN_SELCHANGE消息时，总得到Combox上次的旧值，不解！后来CSDN，发现有人响应该消息得到的却是新的值。。尝试修改了Combox的属性，将Drop down 属性改为 Drop List后，发现 CBN_SELCHANGE消息响应时得到的就是新的值。
CSS实现的弹出菜单
"一个使用div和CSS实现的弹出菜单示例" 在网页设计中，弹出菜单是一种常见的交互元素，常用于导航栏或者下拉选项中，为用户提供更多的操作选项。这个资源提供了一个纯CSS和HTML实现的弹出菜单实例，通过简单的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值