CODEWITHSUNDEEP
csscss-position
Vladislav
Vladislav

Reputation: 533

Mouseenter event on parent when a child is absolute positioned

I'm tring to make a simple drop-down menu, which would be triggered on hover event over some element and stay active as long as the cursor is over that element or is over the dropdown list.

Sample code:

HTML

<div class="header">
  <div class="items">
    <div class="item">
       <span>Caption</span>
    </div>
    <ul class="items_hidden">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
  </div>
</div>
<input type="text">

CSS

.items {
    float: right;
    position: relative;
}
.item {
    text-align: right;
}
.items_hidden {
    display: none;
    margin-top: 7px;
    list-style: none;
    z-index: 2000;
    width: 80px;
    border: 1px solid #f2f2f2;
    text-align: left;
    padding: 10px;
    color: #333;
    line-height: 30px;
    border-bottom: 3px solid #f2f2f2;

}

input {
  width: 100%;
}

JS

$(function() {
    $('.items').on('mouseenter', function(e) {
        $('.items_hidden').show();
    });

    $('.items').on('mouseleave', function(e) {
        $('.items_hidden').hide();
    });

});

I got that working, when the dropdown list is positioned relative, but the problem is once the list is displayed, it causes all following content to move down.

Here is an example: https://jsfiddle.net/2ya06aLo/

Another way would be to position the list absolute, so it wouldn't affect the content below. But in that case the list disappears as soons as I move the cursor out of 'Caption' (in contrast with the first fiddle).

Here is the second example https://jsfiddle.net/8L6ojqLm/

What would be a solution to make the list behave like in 1 and at the same time do not affect the rest of the content like in 2 ?

Upvotes: 3

Views: 2203

Answers (4)

grinmax
grinmax

Reputation: 1855

You can don't use JS

Example

.items {
    float: right;
    position: relative;
}
.item {
    text-align: right;
	padding: 10px;
}
.items_hidden {
    position: absolute;
    right: 0;
	top: 20px;
    display: none;
    margin-top: 7px;
    list-style: none;
    z-index: 2000;
    width: 80px;
    border: 1px solid #f2f2f2;
    text-align: left;
    padding: 10px;
    color: #333;
    line-height: 30px;
    border-bottom: 3px solid #f2f2f2;

}

input {
  width: 100%;
}

.items:hover .items_hidden{
	display: block;
}
<div class="header">
<div class="items">
  <div class="item">
      <span>Caption</span>
  </div>
  <ul class="items_hidden">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </ul>
 
</div>
</div>
 <input type="text">

Live JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/

Upvotes: 1

jfrehner
jfrehner

Reputation: 56

To take up the comment of CBroe: The problem seems to be the "gap" between the and the element. To remove it you could either

  1. give the "item"-Element a height so that it "reaches down" to the ul-element or
  2. or remove the margin-top of the ul-element

Upvotes: 0

Boris P
Boris P

Reputation: 86

Maybe this would help.

.navigation {
  width: 100%;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a {
}
.mainmenu a:hover {
    background-color: #D90000;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 400px;
}
.submenu{
  max-height: 400px;
}
.submenu a {
  background-color: #FF4D4D;
}
.submenu a:hover {
  background-color: #D90000;
}
.submenu{
  overflow:hidden;
  display:none;
}
<nav class="navigation"><!-- pocetak navigacije -->
  <ul class="mainmenu">
    <li><a href="">Link</a></li>
    <li class="start"><a href="#ar">Link</a>
      
      <ul class="submenu">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
      
    </li>
	<li><a href="">Home</a></li>
	</ul>
</nav>

Upvotes: 0

Kuba Wojtach
Kuba Wojtach

Reputation: 566

Couldn't it be done via pure css?

https://www.w3schools.com/howto/howto_css_dropdown.asp

Upvotes: 0

Related Questions