`
ayaya
  • 浏览: 456791 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

css menu2

阅读更多
<!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>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.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:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.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:#bd8d5e; color:#fff;}

</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, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}


.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.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:0; top:30px; color:#000; background:#dfc184;}
.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:#bd8d5e; color:#fff;}

</style>
<![endif]-->
</head>

<body>

<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</a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->

        <ul class="right_side">
            <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>
    </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>
    </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 class="right_side">
    <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="right_side">
    <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>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->

        <ul class="left_side">
            <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>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>
</body>
</html>

分享到:
评论

相关推荐

    22款css Menu CSS滑动门菜单效果下载

    22款css Menu CSS滑动门菜单效果下载 预览地址: 第一批(文件包1文件夹下):http://www.sky54.net/cssmenu/1/&lt;br&gt;&lt;br&gt;第二批(文件包2文件夹下):http://www.sky54.net/cssmenu/2/&lt;br&gt;&lt;br&gt;&lt;br&gt;

    qq 下拉菜单 CSS css menu

    qq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menu

    CSS3Menu v3.5.zip

    **CSS3**(层叠样式表第三版)是Web样式语言,它扩展了CSS2的功能,引入了许多新的特性,如动画、阴影效果、圆角边框、多列布局等,使得网页设计更加灵活且富有表现力。在CSS3Menu中,这些特性被充分利用,以创建出...

    css3menu导航栏制作

    CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单,你只需点几下鼠标,选几种颜色,完事。如果利用内置的模板那就更容易了,只需输入菜单上的文字即可。 如果你在设计导航条的时候,导航条的文字里面包含中文...

    css menu sample

    "css menu sample"这个项目提供了一个关于如何使用CSS构建菜单的实例,特别是涉及了Mallonic的解决方案,它可能包含了针对不同浏览器的兼容性调整,即所谓的“hack”技巧。 Mallonic是一个知名的前端开发资源库,...

    css_menu.rar_CSS ME_css_vertical css menu

    这个“css_menu.rar”压缩包显然包含了关于如何创建一个CSS驱动的垂直多级菜单的相关资源。下面,我们将深入探讨这个主题,以及如何通过CSS实现这样的效果。 首先,我们要理解CSS垂直菜单的基本结构。通常,这种...

    CSS3Menu 网页导航菜单制作工具

    CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单,你只需点几下鼠标,选几种颜色,完事。如果利用内置的模板那就更容易了,只需输入菜单上的文字即可。比较遗憾的是在 试用过程中,CSS3Menu 的导出功能貌似...

    JS+CSS Menu

    "JS+CSS Menu"是一个结合了JavaScript(JS)和层叠样式表(CSS)技术的菜单解决方案,旨在创建交互式、动态且具有吸引力的网页菜单。这种菜单设计方法充分利用了两种语言的优势,提供更丰富的用户体验。 JavaScript...

    css_Menu_css样式

    本主题“css_Menu_css样式”着重关注如何利用CSS来创建功能性和美观的下拉菜单。下拉菜单是网站导航系统中的常见组件,为用户提供了一种方便的方式来访问多个层次的链接。 一、CSS基础 CSS通过选择器和声明来操作...

    CSS Menu Generator 4.0. 菜单编辑器

    CSS Menu Generator 4.0.

    CSS_Menu.rar_css menu download

    本资源"CSS_Menu.rar"是一个压缩包,包含了创建商业风格CSS垂直菜单所需的所有文件,用户可以下载并根据自己的需求进行修改,以适应自己的网站设计。 首先,我们来了解一下CSS垂直菜单的基本构成。一个典型的CSS...

    国外流行的58个基本css menu素材

    本文将深入探讨标题"国外流行的58个基本css menu素材"所涉及的知识点,以及如何利用这些素材提升网站设计。 首先,CSS菜单的核心在于其样式控制能力,它允许设计师通过定义不同样式来改变菜单的布局、颜色、字体、...

    CSS Menu Generator v4.0汉化绿色版

    **CSS Menu Generator v4.0汉化绿色版详解** 在网页设计中,创建美观且功能强大的导航菜单是一项关键任务,因为它直接影响着用户的交互体验。CSS Menu Generator v4.0是这样一款工具,专为帮助设计师和开发者快速、...

    CSS3 Menu菜单编辑器

    CSS3 Menu菜单编辑器,可自动方面的设置自定义个性的导航菜单栏

    css-dock-menu

    "css-dock-menu" 是一个利用CSS技术创建的仿Flash效果的菜单,它以其美观、动态的特性吸引用户的注意力,提升了网站的交互体验。在网页设计中,这种菜单可以增强用户界面的可用性和吸引力。 "cool css menu" 标签...

    good_menu.rar_html css menu

    "good_menu.rar" 提供了一个基于 HTML 和 CSS 的下拉菜单示例,让我们来深入了解一下这个主题。 首先,HTML(HyperText Markup Language)是网页内容的基础结构语言,而 CSS(Cascading Style Sheets)则负责网页的...

    .net Menu控件动态绑定数据库(C#)css样式

    本文将详细讲解如何使用C#语言,结合数据库和CSS样式,实现.NET Menu控件的动态绑定。 首先,理解Menu控件的基本概念。Menu控件是一个用于构建多级导航结构的控件,它可以自动生成HTML代码,如和元素,以呈现层次化...

    css_menu.zip_CSS ME_css

    本主题“css_menu.zip_CSS ME_css”关注的是如何利用纯CSS创建一个下拉菜单,这在网页交互设计中是常见的需求,特别是对于导航栏的设计。这个压缩包包含了一个名为“css_menu”的示例,旨在展示如何用简单的CSS代码...

    CSS3写的Lavalamp Menu

    Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?现在我使用CSS3写了一个水平的Lavalamp的导航效果,这个效果其实很简单,主要...

    二级树形菜单示例:CSS TreeMenu

    二级树形菜单示例:CSS TreeMenu

Global site tag (gtag.js) - Google Analytics