CSS: change header height while hovering on other element

Question

I am trying to change the height of the header while I'm hovering over a div in the header. The div is a dropdown button and the header is supposed to extend a specific amount of pixels to fit the drop down-content.

HTML:

<header>
    <nav class="menyer">
        <div class="dropdown">
            <button class="dropbtn">Dropdown</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                 </div>
         </div>
     </nav>
 </header>

You can find all source code here

try to remove height from .menyer class.. i think that's what you need.. right? — Leo the lion, Apr 28 '16 at 11:36
@Leothelion - more Like this - https://jsfiddle.net/Paulie_D/tex75gop/1/ — Paulie_D, Apr 28 '16 at 11:41
Or possibly - http://stackoverflow.com/questions/13545947/position-absolute-and-parent-height — Paulie_D, Apr 28 '16 at 11:46

cloned · Accepted Answer · 2016-04-28T11:53:31.380

0

You can't change the height of an element while hovering over a child-element. All you can do is to expand the height of the inner element so that the outer element stretches accordingly. That only works if there is no fixed height on the base-element (your header)

basic example:

<header> <ul> <li>Item 1</li> <li> Item 2 </li> </ul> </header>

CSS:

li{display:block;height: 30px;}
li:hover{height: 50px;}
header{background-color:red}

That way the header extends if you hover over a li element. If you need a minimum height for your header to work (because of the design, ... ) then set a min-height for the header.

edited Apr 28 '16 at 11:53

answered Apr 28 '16 at 11:34

cloned

6,346
4
26
38

So.. is there any other option? You could paste the code that should work for OP. – node_modules Apr 28 '16 at 11:38
It would really depend on what he would want to do exactly. srry edit coming up – cloned Apr 28 '16 at 11:48
_I am trying to change the height of the header while I'm hovering over a div in the header_ – node_modules Apr 28 '16 at 11:49
Sorry, posted my reply too fast, still new to this site. I know what he said in the post (and edited my post for a suggestion), to add to the solution in the duplicate link. – cloned Apr 28 '16 at 11:56

CSS: change header height while hovering on other element

1 Answers1