pure_coder pure_coder - 5 months ago 31
HTML Question

absolute position child div max-width not working properly

I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div

.dropdown
(grey colored) appears whenever the parent div
.content-small
(green colored) is hovered upon. Please note, that I have used the
.max-width
property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.

Now, what I want to do is that I want to increase the max-width of the child div
dropdown
. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.

I know that this can be resolved by replacing
max-width
with only
width
in the
.dropdown
class. But if I do that, then the child div
dropdown
will not scale with the browser window. So in any case, I have to use
.max-width
property for all divs.

I also don't want to use media queries at this stage. In totality, this is what I am looking for:


  1. I want to increase the width of the dropdown child div
    .dropdown
    , I also want it to be scaled along with the browser windows like all other div's (max-width)

  2. I don't want to use media queries at this stage, since I am trying to practice with plain CSS

  3. I don't mind if the
    .dropdown
    div DOES NOT remain the child of the parent
    .content-small
    (if a possible solution needs it that way)



Would appreciate a solution for this.



* {
box-sizing: border-box;
}

a {
color: rgba(0,0,0,1);
text-decoration: none;
}

a:hover {
color: rgba(0,0,255,1);
}

html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}

.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}

.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}

.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}

.content-small:hover .dropdown{
visibility: visible;
}

.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}

<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>




Answer

Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:

HTML

<div class="wrapper">
    <div class="content">
        <div class="content-small">Home</div>
        <div class="container" style="height:60px;padding-top:10px;">
            <div class="dropdown"></div>
        </div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
}

a {
    color: rgba(0,0,0,1);
    text-decoration: none;      
}

a:hover {
    color: rgba(0,0,255,1); 
}

html,body {
    margin: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,1);
    padding: 0px;
    }



.wrapper {
    height: 600px;
    max-width: 960px;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-color: rgba(204,204,204,1);
    margin-right: auto;
    position: relative;
    padding: 0px;
    margin-top: 0px;
}


.content {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    max-height: 200px;
    max-width: 600px;
    background-color: #FFF;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    text-align: center;
    border: 3px solid rgba(0,0,0,1);
    border-radius: 15px 15px 0px 0px;
    width: 100%;
}

.content-small {
    max-width: 100px;
    height: 100%;
    max-height: 50px;
    background-color: rgba(0,255,204,1);
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(0,0,0,1);
    top: 5px;
  margin-top:10px;
}

.content-small:hover + .container, .container:hover{
    visibility: visible;    
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}

.dropdown {
    background-color: rgba(214,214,214,1);
    border: 3px solid rgba(255,0,0,1);
  max-width: 100px;
    height: 100%;
    max-height: 50px;
    position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;

}

And here is: UPDATED JS FIDDLE

[EDIT]

The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors

[SECOND EDIT]

I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover