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>