html5/css3 ul/li 下拉菜单展示

一、样式

<style>

a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }

a#trans:hover { background: #220077; color: #fff; }

#trans-nav { list-style-type: none; height: 50px; padding: 0; margin: 0;float: right;}

#trans-nav li { float: right; position: relative; padding: 0; line-height: 35px;margin-left:10px; background: #ffffff url(nav-bg.png) repeat-x 0 0; }

#trans-nav li:hover { background-position: 0 -40px; background:#680000;}

#trans-nav li:hover > a{color: #ffffff;}

#trans-nav li a { display: block; padding: 10px 32px; text-decoration: none; line-height: 24px; margin-left: 2.5px;font-size: 18px;}

#trans-nav li:hover > ul{ visibility: visible; }

#trans-nav li ul { opacity: 0; position: absolute; left: 0; background: #63867f; list-style-type: none; padding: 0; margin: 0; visibility: hidden;width: 100%;overflow: hidden;margin-top: 1px;z-index: 999;}

#trans-nav li:hover ul { opacity: 1; }

#trans-nav li ul:hover ul { opacity: 1; }

#trans-nav li ul li { float: none; position: static;background: #853232;text-align: center; }

#trans-nav li:hover ul li { height: 31px; }

#trans-nav li ul li a { background: #853232; line-height: 11px;padding-left: 0px;margin-left: -10px;text-align: center;width: 100%;color: #d3ad78;font-size: 12px;}

#trans-nav li ul li a:hover { background: #5a8078; }

#trans-nav li { -webkit-transition: all 0.2s; }

#trans-nav li a { -webkit-transition: all 0.5s; }

#trans-nav li ul { -webkit-transition: all 1s; }

#trans-nav li ul li { -webkit-transition: height 0.5s; }

.menu_c{

}

.web_menu_css{

text-align: left;

width: 100%;

padding-top: 45px;

}

</style>

二、html代码

<ul>

<li><a href="#">产品与服务</a>

<ul>

<li><a href="#">财富管理</a></li>

<li><a href="#">资产管理</a></li>

<li><a href="#">私行管理</a></li>

<li><a href="#">互联网金融</a></li>

<li><a href="#">基金销售</a></li>

<li><a href="#">恒天俱乐部</a></li>

</ul>

</li>

<li><a href="#">恒天频道</a>

<ul>

<li><a href="#">公司新闻</a></li>

<li><a href="#">媒体新闻</a></li>

<li><a href="#">恒天研究</a></li>

</ul></li>

<li><a href="#">关于恒天</a>

<ul>

<li><a href="#">公司介绍</a></li>

<li><a href="#">企业文化</a></li>

<li><a href="#">懂事长寄语</a></li>

<li><a href="#">管理团队</a></li>

<li><a href="#">恒天荣誉</a></li>

<li><a href="#">恒天商学院</a></li>

</ul>

</li>

<li><a href="#">首页</a></li>

</ul>