Dropdown on div hover - dropdown对齐问题

Question

我用图片和文本制作div。用户可以将鼠标悬停在此div上以获取下拉列表。我对下拉列表的对齐有问题。我需要它与悬停div的右边框对齐：

代码如下：

<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>

和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;

        }

Answer 1

在#hoverDiv中添加position:relative

在hover中#div.showme:hover div.showme

删除float:left (冗余)

删除position:relative (冗余)

删除margin-left:5px & margin-right:5px，除非您喜欢它们

在div.showme中

删除float:left (冗余)

删除left:-999em (冗余)

用right:0替换left:auto

这个jsFiddle已经为您完成了所有的工作。

Answer 2

你的意思是这样的吗？http://jsfiddle.net/nbZmG/9/​​​

这是另一个- http://jsfiddle.net/nbZmG/10/

请注意，在这两种情况下，蓝色框的宽度都是120px，它们使用margin根据红色框的左侧和右侧对齐。

希望这能帮上忙。

Answer 3

你在.showme分区上的悬停时添加了margin-left:5px，去掉它，它应该对齐：

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