CODEWITHSUNDEEP
css
AJ Quick
AJ Quick

Reputation: 171

CSS Child Menu LI Forcing Parent's Width to Increase

So I know almost exactly what I need to do, but I don't know how I need to do it.

I have a drop down menu that opens when you hover over it. The child is causing the width of the parent to increase when you hover over it and that is not what I want. I know I need to set the child to position absolutely... but when I do it the child no longer shows up and it appears the hover on the parent no longer functions. Can anyone help figure out where exactly the absolute position part needs to go in? You can see I have something that I commented out.

I'd like the child to be aligned at the bottom right of the "Action" drop down.

I also have a problem where if I set the padding / margin on the parent. It extends to child. I believe I can solve that either with the absolute positioning, or after that is solved.

Here is my HTML:

<br />
<div style="width: 90%; margin:auto; background-color:#CCC; height:36px;">
<div id="actions">
    <ul>
        <li class="action_arrow_down"><a href="#">Actions</a>
            <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another Action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class = "separated_action"><a href="#">Separated Link</a></li>
            </ul>
        </li>
    </ul>
</div>

And my CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#actions {
float: right;
display: block;
background-color: #4d90fe;
color: #FFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}

#actions ul{
padding: 0px;
margin: 0px;
display: block;
position: relative;
overflow: hidden;
}

#actions li ul {
display: none;
background-color: #ffffff;
border: #CCC 1px solid;
/*position:absolute;
top:100%;
left:0;*/

}

#actions li ul li {
    display: block;
background-color: #ffffff;
color: #000000; 
overflow: hidden;
}

#actions li ul li:hover, #actions li ul li a:hover {
background-color: #eeeeee;
}

#actions li ul li a {
color: #000000; 
}

#actions li{
line-height: 36px;
list-style: none;   
font-size: 14px;
text-indent: 15px;
}

#actions li:not(ul li){
background-color: #4d90fe;
}

#actions li:not(ul li):hover {
background-color: #0362fd;  
}

#actions li:hover > ul {
display: block;
}

#actions li a {
text-decoration: none;
color: #ffffff;
display:block;
}

#actions li ul li {
display: block; 
}

.separated_action {
border-top: #CCC 1px solid; 
}

/*.action_arrow_down {
background-image: url('images/action_arrow_down.png');
background-repeat: no-repeat;
background-position: right center;
}*/

The code is probably very convoluted and could use some cleaning up. I'll remove redundant parts once I get the sub menu working how I want.

Here is a jsfiddle.

Upvotes: 0

Views: 1482

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You already had it. That you "loose" your submenu when you position it absolute, is because you position the parent relatively.

Solution is to remove that line:

#actions ul{
    padding: 0px;
    margin: 0px;
    display: block;
    /*position: relative; <-- delete this line */
    overflow: hidden;
}

#actions li ul {
    display: none;
    background-color: #ffffff;
    border: #CCC 1px solid;
    position:absolute;
    margin-left: -80px;
}

Check your updated Fiddle.

Adjust the margin-left to shift the submenu left or right. By default the left side of the parent is the left side of the child. If you'd give the child a fix width, you could use a negative margin-left to align the right sides.

Check your 2nd updated Fiddle.

Upvotes: 1

Related Questions