flyout-竖向三级弹出菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;flyout-竖向三级弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}

&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;
&lt;style type="text/css"&gt;
.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;}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="menu"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;

 &lt;!--[if lte IE 6]&gt;
 &lt;a href="../menu/index.html"&gt;DEMOS
 &lt;table&gt;&lt;tr&gt;&lt;td&gt;
 &lt;![endif]--&gt;

  &lt;ul&gt;
  &lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;HOVER/CLICK &gt;&lt;/a&gt;

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

   &lt;ul&gt;
   &lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="../menu/hover_click.html" title="Hover/click with no active/focus borders"&gt;hover/click&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/a&gt;
  &lt;![endif]--&gt;

  &lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/old_master.html" title="Image Map for detailed information"&gt;image map&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/bodies.html" title="fun with background images"&gt;fun backgrounds&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/fade_scroll.html" title="fade-out scrolling"&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="../menu/em_images.html" title="em size images compared"&gt;em sized images&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;!--[if lte IE 6]&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/a&gt;
  &lt;![endif]--&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a class="hide" href="index.html"&gt;MENUS&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a class="hide" href="index.html"&gt;MENUS&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>flyout-竖向三级弹出菜单</title>

/* 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]>

.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>

<ul>

<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>

<a href="../menu/index.html">DEMOS

<![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 >

<![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>

<ul>

<li><a class="hide" href="index.html">MENUS</a></li>

</ul>

</li>

</div>

</body>

</html>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复