CODEWITHSUNDEEP
htmlcsshoverhtml-lists
AK94
AK94

Reputation: 345

Making the hierarchy in html appear based on hover

the given html script creates a hierarchy under the Main Menu. I want to implement a hover such that when I place my cursor on Main Menu, the bottom three fields appear. Please help and thanks a lot. 

<li class="linkCMSListMenuLI" style=""><a 
href="/Inv/Fs.aspx" 
class="linkCMS" style="" >Main Menu</a>

<ul>
   <li><a href="#">Menu 2.1</a></li>
   <li><a href="#">Menu 2.2</a></li>
   <li><a href="#">Menu 2.3</a></li>
   </ul>
   </li>

Upvotes: 1

Views: 404

Answers (3)

Shafikul Islam
Shafikul Islam

Reputation: 359

li>ul{
  display: none;
}
li:hover>ul{
  display: block;
}
<li><a>Main Menu</a>
  <ul>
    <li><a href="#">Menu 2.1</a>
        <ul>
           <li><a href="#">Menu 2.1.1</a></li>
           <li><a href="#">Menu 2.1.2</a></li>
           <li><a href="#">Menu 2.1.3</a></li>
       </ul>
     </li>
     <li><a href="#">Menu 2.2</a></li>
     <li><a href="#">Menu 2.3</a></li>
     </ul>
</li>

Upvotes: 2

felixmosh
felixmosh

Reputation: 35613

With pure css solution.

.nav {
  padding: 0;
}

.nav li {
  display: inline-block;
  position: relative;
}

.sub-nav {
  display: none;
  position: absolute;
  top: 100%;
}

.nav li:hover .sub-nav {
  display: inline-block;
}
<nav>
  <ul class="nav">
    <li> main 1
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <li> main 2
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <li> main 3
      <ul class="sub-nav">
        <li>1</li>
        <li>2</li>
        <li>2</li>
      </ul>
    </li>
    <ul>
</nav>

Upvotes: 1

ali asghar tofighian
ali asghar tofighian

Reputation: 349

The best and easiest way to implement this effect is using bootstrap, you can use collapsible lists, accordion, etc, please see this link https://www.w3schools.com/bootstrap/bootstrap_collapse.asp Otherwise you should write your own jQuery function.

Upvotes: 1

Related Questions