CODEWITHSUNDEEP
htmlcss
1110
1110

Reputation: 6839

Dropdown on div hover - dropdown alignment issue

I am making div with image and text. User can hover on this div to get dropdown. I have issue on alignment of dropdown. I need it to be aligned with the right border of hovered div:
enter image description here This is the code:

<div id="hoverDiv">
                <img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
                <a href="#">Hover Me!</a>
                <div class="showme">
                    <p>
                        Hidden Stuff!</p>
                </div>
            </div>

And CSS

#hoverDiv
        {
            width: 100px;
            height: 40px;
            float: right;
            margin-right: 5%;
        }
        #hoverDiv:hover
        {
            background: #ff0000;
        }
        #hoverDiv:hover .showme
        {
            display: inline;
            float: left;
            position: relative;
            margin-left: 5px;
            margin-right: 5px;
        }
        .showme
        {
            display: none;
            width: 100px;
            height: 200px;
            background: #0000ff;
            margin: 0px auto;
            float: left;
            left: -999em;
            padding: 10px 5px 0px 5px;
            border: 1px solid #777777;
            border-top: none;
            z-index: 10;
            position: absolute;
            left: auto;
            top: auto;

        }

Upvotes: 2

Views: 2599

Answers (4)

Hoon
Hoon

Reputation: 1611

In #hoverDiv:hover .showme remove margin-left and margin-right.

In .showme remove margin and modify padding to 10px 0px 0px 0px, and border: 1px to 0px.

Upvotes: 0

Vin Burgh
Vin Burgh

Reputation: 1419

In #hoverDiv, add position:relative

In #hoverDiv:hover div.showme:
Remove float:left (redundant)
Remove position:relative (redundant)
Remove margin-left:5px && margin-right:5px unless you prefer them

In div.showme:
Remove float:left (redundant)
Remove left:-999em (redundant)
Replace left:auto with right:0

This jsFiddle has all the work done for you.

Upvotes: 2

DriftingSteps
DriftingSteps

Reputation: 526

Did you mean something like this? http://jsfiddle.net/nbZmG/9/​​​

Here's another one - http://jsfiddle.net/nbZmG/10/

Notice that in both cases, the width of the blue box is 120px, and they are aligned according to the left and right side of the red box using margin.

Hope this helped.

Upvotes: 1

Andres I Perez
Andres I Perez

Reputation: 75409

You're adding margin-left:5px on hover on your .showme div, remove that and it should align:

#hoverDiv:hover .showme {
    display: inline;
    float: left;
    margin-left: 0; /* here */
    margin-right: 5px;
    position: relative;
}

Upvotes: 0

Related Questions