upmenu-水平竖弹向上三级弹出菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】 upmenu-水平竖弹向上三级弹出菜单
作者:Dezai.CN / 发布于2012/4/1/ 621
upmenu-水平竖弹向上三级弹出菜单
<div> <span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</span><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" style="color: rgb(122, 148, 174); text-decoration: none; font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a><span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">"></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><html xmlns="</span><a href="http://www.w3.org/1999/xhtml" style="color: rgb(122, 148, 174); text-decoration: none; font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">http://www.w3.org/1999/xhtml</a><span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">"></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><head></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><title>upmenu-水平竖弹向上三级弹出菜单</title></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><style type="text/css"></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">/* common styling */</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.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;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul {padding:0; margin:0;list-style-type: none; }</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li {float:left; position:relative;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li ul {display: none;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">/* specific to non IE browsers */</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover a {color:#000; background:#e9e9c7;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li ul {display: none;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul.left {left:-105px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "></style></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><!--[if lte IE 6]></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><style type="text/css"></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">table {border-collapse:collapse; margin:0; padding:0;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a.hide {display:none;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover {color:#000; background:#e9e9c7;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a ul {visibility:hidden;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul.left {left:-105px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">.menu ul li a:hover ul li a:hover ul.left {left:-210px;}</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "></style></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><![endif]--></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "></head></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><body></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> </span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><div class="menu"></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><ul></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><li><a class="hide" href="../menu/index.html">DEMOS</a></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><!--[if lte IE 6]></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><a href="../menu/index.html">DEMOS</span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><table><tr><td></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "><![endif]--></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> <ul></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li></span><br style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; ">
<span style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 14px; line-height: 25px; text-indent: 28px; "> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li></span></div>
试试其它关键字
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)