upmenu-水平竖弹向上三级弹出菜单

&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;upmenu-水平竖弹向上三级弹出菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;}

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

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

&lt;body&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&gt;
&lt;p&gt;aa&lt;/p&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="Styling forms"&gt;styled form2&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&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>upmenu-水平竖弹向上三级弹出菜单</title>

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

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

</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="Styling forms">styled form2</a></li>

</ul>

</li>

</ul>

</li>

</ul>

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

发表回复 取消回复

相关文章

发表回复取消回复