CODEWITHSUNDEEP
javascriptcss
rakop
rakop

Reputation: 67

How to show/hide when hover in/out on specific element

I make a secondary menu and I like it to be displayed when user hover a specific one of the main menu items....

I tried this code but it didn't work...

.second-menu {display:none}
ul li #2:hover + .second-menu {display:block}
<ul>
  <li id="1">first</li>
  <li id="2">second</li>
  <li id="3">third</li>
<ul>
  
  <div class="second-menu">
    <ul>
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </div>

any suggestions?.... only by css or javascript....

Upvotes: 0

Views: 60

Answers (4)

pbaldauf
pbaldauf

Reputation: 1681

By using pure CSS you have to ensure that your submenu (.second-menu) is a child-node of your hovered HTML-Element. Because CSS unfortunately doesn't know a parent selector.

By using JS you are more flexible. Means placing the submenu wherever you wish.

* { margin: 0; padding: 0; }
.second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; }
ul li#two:hover > .second-menu {display:block}
.relative { position: relative; border: 1px solid black; }
li { display: inline-block; }
<ul class="relative">
  <li id="one">first</li>
  <li id="two">second
    <ul class="second-menu">
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </li>
  <li id="three">third</li>
<ul>

Upvotes: 0

Sravan
Sravan

Reputation: 18647

Answer using Javascript,

document.getElementById('hover').onmouseover = function(){
    document.getElementById('second-menu').style.display = 'block';
}

document.getElementById('hover').onmouseout = function(){
    document.getElementById('second-menu').style.display = 'none';
}
.second-menu{
  display:none;
}
<ul id="hover">
  <li id="1">first</li>
  <li id="2">second</li>
  <li id="3">third</li>
<ul>
  
  <div class="second-menu" id="second-menu">
    <ul>
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </div>

Here is a fiddle

Upvotes: 0

Mathieu VIALES
Mathieu VIALES

Reputation: 4772

If you wish to use CSS, you will have to put your sub menu inside the element that you want to hover.

For the CSS, C.Raf.T's answer is perfect.

If for some reason you want to use javascript you could do something like this 

document.getElementById('2').addEventListener('mouseenter', function ()
{
  document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
  document.getElementById('subMenu').style.display = "none";
});

Note: the above code requires you to add a "subMenu" id to the div containing your menu. If you wish to display serval menus with only one hover event, use a class instead.

But honestly, the CSS answer is the best way to go if all you need is nested sub menus. If the sub menu has to be outside of the parent, you will need the javascript.

Upvotes: 1

C.Raf.T
C.Raf.T

Reputation: 383

.second-menu{
  display:none;
}
li:hover >.second-menu{
  display:block;
}
<ul>
  <li id="1">first</li>
  <li id="2">second  
 
    <ul class="second-menu">
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
    </li>
  <li id="3">third</li>
  <ul>

Upvotes: 1

Related Questions