Expected output: HW_2014->(hover->submenu->right)NB-8->(hover->submenu->right)NB_8-3 When menu is hover, it should display on right(mean, the submenu are from its parents menu) Output I got: HW_2014 NB-8 NB_8-3(one below the other)
<pre lang="CSS"> <style type="text/css"> .menu{ width: 82%; margin-bottom:10px; margin-top:5px; height:20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; float:left; } .menu ul li a:link, div ul li a:visited { display: block; color:gray; text-align: center; text-decoration: none; padding: 4px; width: 100px; } .menu ul:after { content: ""; clear: both; display: block; } .menu ul li a:hover{ background: #4b545f; height:15px; color:White; background: linear-gradient(top, #4f5964 0%, #5f6975 100%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 100%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 100%); } .menu ul li ul li a:link, li ul li a:visited { display: block; background-color: #D8DFED; color: gray; text-align: center; text-decoration: none; padding: 4px; border-bottom: 1px solid #fff; width: 150px; } .menu ul li ul li a:hover { background-color: #D8DFED; } .menu ul { padding: 0 0px; border-radius: 10px; list-style: none; position: relative; display: inline-table; margin-top:0px; } .menu ul li { float: left; margin-left: 5px; } .menu ul li ul li { float: left; margin-left: 5px; } .menu ul li ul { display: none; } .menu li:hover ul{ display: block; } .menu ul li ul li ul { display: none; } .menu ul li ul li ul li { float:left; margin-left:0px; } </style></pre> Data to be displayed: <pre lang="HTML"><div class="menu"> <ul> <li> <a href='#'>HW_2014</a> <ul> <li><a href='#'>NB-8</a> <ul> <li><a href='#'>NB_8-3</a> </li> </ul> </li> </ul> </li> </ul> </div></pre> Need help ???
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)