How hide the list items when mouse move from current item?

Question

In this program the sub menu item are does not hide when the mouse move to other items,I want to hide the sub menu items when mouse move from their area .can you help me?.I really want a drop-down menu on click.

    #main li{
        list-style-type: none;
        display: none;
        text-decoration: none;
    }
    #main{
        cursor: pointer;
        
    }
    #pappaya {
        background-color:#339933;
         text-decoration: none;
    }
     #pappayas {
            background-color:#339933;
          text-decoration: none;
        }
    .orang{
        text-decoration: none;
    }
    #pappaya li{
        text-decoration: none;
    }

 <html>
        <head>
            <link rel="stylesheet" type="text/css" href="mango.css">
            <script>
                 function mangoGrape(selector){
                document.querySelectorAll(selector)
                    .forEach(function(node){
                        node.style.display="block";
                    })
                 }
            </script>
        </head>
        <body>
        </body>
        <ul id="main" onclick="mangoGrape('.apple')">main1
            <div id="pappaya">
            <li class="apple"> <a href="#">sub1</a></li>
             <li class="apple"><a href="#">sub2</a></li>
             <li class="apple"><a href="#">sub3</a></li>
            </div>
        </ul>
         <ul id="main" onclick="mangoGrape('.orang')">main2
            <div id="pappayas">
             <a href="#"><li class="orang">sub21</li></a>
             <a href="#"><li class="orang">sub22</li></a>
             <a href="#"><li class="orang">sub23</li></a>
            </div>
        </ul>
    </html>

In this program the sub menu item are does not hide when the mouse move to other items,I want to hide the sub menu items when mouse move from their area .one another problem associated with this code is the text decoration property is not working properly.

http://stackoverflow.com/questions/10995165/css-opposite-of-hover-on-mouse-leave — RIYAJ KHAN, Aug 17 '16 at 09:37
Do you wanna show the sub-list only on **click** or Is it ok to show when mouse is moved over the menu item. — Pugazh, Aug 17 '16 at 09:49
Check this example - http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar — Pugazh, Aug 17 '16 at 09:51

score 2 · Accepted Answer · edited Dec 02 '16 at 05:27

You just forget hiding another item:

/*Do not show li when page showed/ li { display: none; }*/


#main li{
    list-style-type: none;
    display: none;
    text-decoration: none;
}
#main{
    cursor: pointer;

}
#pappaya {
    background-color:#339933;
     text-decoration: none;
}
 #pappayas {
        background-color:#339933;
      text-decoration: none;
    }
.orang{
    text-decoration: none;
}
#pappaya li{
    text-decoration: none;
}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
            function mangoGrape(selector){
                 // hide all lis first
                 document.querySelectorAll('li')
                    .forEach(function(node){
                        node.style.display="none";
                    })
                // then show what you want
                document.querySelectorAll(selector)
                    .forEach(function(node){
                        node.style.display="block";
                    })
             }
        </script>
    </head>
    <body>
      <ul id="main" onclick="mangoGrape('.apple')">main1
          <div id="pappaya">
          <li class="apple"> <a href="#">sub1</a></li>
           <li class="apple"><a href="#">sub2</a></li>
           <li class="apple"><a href="#">sub3</a></li>
          </div>
      </ul>
       <ul id="main" onclick="mangoGrape('.orang')">main2
          <div id="pappayas">
           <a href="#"><li class="orang">sub21</li></a>
           <a href="#"><li class="orang">sub22</li></a>
           <a href="#"><li class="orang">sub23</li></a>
          </div>
      </ul>
    </body>
</html>

it's a good solution but it always shown some sub menu items even if we click on the outside it will show that.i want a drop-down menu on click. — ADH - THE TECHIE GUY, Aug 17 '16 at 10:00

score 1 · Answer 2 · edited Dec 02 '16 at 05:29

The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
             function mangoGrape(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
             }
            function hide(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="none";
                })
             }
        </script>
    </head>
    <body>
    </body>
    <ul id="main" onmouseout="hide('#pappaya')" onclick="mangoGrape('.apple')">main1
        <div id="pappaya">
        <li class="apple"> <a href="#">sub1</a></li>
         <li class="apple"><a href="#">sub2</a></li>
         <li class="apple"><a href="#">sub3</a></li>
        </div>
    </ul>
     <ul id="main" onmouseout="hide('#pappayas')" onclick="mangoGrape('.orang')">main2
        <div id="pappayas">
         <a href="#"><li class="orang">sub21</li></a>
         <a href="#"><li class="orang">sub22</li></a>
         <a href="#"><li class="orang">sub23</li></a>
        </div>
    </ul>
</html>

this is good.but i'm not able to select the sub menu item when using this code,really i want a drop down menu on click — ADH - THE TECHIE GUY, Aug 17 '16 at 09:47

How hide the list items when mouse move from current item?

2 Answers2