flyout-竖向三级弹出菜单

最新推荐文章于 2019-10-01 08:25:58 发布
最新推荐文章于 2019-10-01 08:25:58 发布
阅读量599 收藏
点赞数
分类专栏： CSS 文章标签： class ie browser layout menu list

<!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>flyout-竖向三级弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
.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:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}

</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 &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>
 <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>
</body>
</html>

我把金钱献给你
关注
专栏目录
Github安卓流行布局开源库
tasty
10-18 920
抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的ViewGroup FantasySlide ★1049 - 单手势滑出侧边栏与选择菜单 Floating-Nav...
Android 各类优秀依赖库 等各位砖友来搬
as89751的博客
09-03 2955
有很多类型的开源库 希望能够帮助到您 抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的ViewGroup FantasySlide ★1049...
常规三级竖向导航菜单
01-23
常规三级竖向导航菜单
5款DIV+CSS导航菜单(三)
kaddisher的专栏
11-16 908
flyout-竖向三级弹出菜单http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">flyout-竖向三级弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:106px; height:15
CSS竖向三级弹出菜单(图)
管子（zero）的杂乱空间
11-25 1362
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
柯乐义高级弹出菜单（可以有三级菜单）
weixin_34355881的博客
02-22 72
柯乐义高级菜单是使用jquery实现的弹出层菜单，可以有三级菜单项。效果网址：http://www.keleyi.com/keleyi/phtml/supermenu/或者将下面的完整代码保存到html文件，打开查看效果。本实例使用了jQuery的bind() 方法。bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。语法$(selector).bind(event...
好看的下拉菜单
12-16
<title>flyout-竖向三级弹出菜单 /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu...
XamarinForms-NavigationPatterns:在 Xamarin.Forms 中实现标准导航模式
06-21
2. **导航API**：在Xamarin.Forms中，`INavigation`接口提供了导航服务，用于推送和弹出页面。`PushAsync()`方法将新页面推入导航堆栈，`PopAsync()`则会移除并返回前一个页面。还有`PopToRootAsync()`，它会将导航...
div+css制作的弹出三级菜单
08-01
div+css制作的弹出三级菜单,绝对好用。适合二次开发。
jquery 竖向下拉三级菜单特效
09-15
制作导航下拉三级菜单的特效 美化你的网页
三级导航菜单,三级竖向展开/收缩导航菜单
02-27
三级导航菜单,三级竖向展开/收缩导航菜单 三级导航菜单,三级竖向展开/收缩导航菜单
jquery竖向下拉三级菜单效果
07-04
jquery竖向下拉三级菜单效果，可用做网页导航，竖向下拉菜单中出现子级横向排列的竖形菜单
div+css 纵向三级导航菜单 html代码
10-17
div+css 纵向三级导航菜单 html代码
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS）
weixin_30709635的博客
12-25 170
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS） 其实这种菜单个人认为应该称作二级，但很多朋友都习惯把它叫作三级，就顺其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可。水平方...
三级dropdown弹出菜单
weixin_30315905的博客
10-14 279
<!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> <...
竖向三级树形折叠列表菜单代码
10-01 568
Code1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">2<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">34<head>5<title>竖向三级树形折叠列表菜单代码-www...
css 三级横向弹出菜单
lanchengxiaoxiao的专栏
05-07 638
dropline-水平三级横向弹出菜单 /* 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:rela
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值