Click here to Skip to main content
14,767,340 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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 ???
Posted
Updated 26-Aug-14 20:34pm
v3
Comments
Gihan Liyanage 29-Aug-14 1:13am
   
If your question is clear, people may answer.. Otherwise not ..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900