下拉对div悬停 - 下拉对齐问题

我正在与图像和文本的div。用户可以将鼠标悬停在该div上以获取下拉菜单。我有关于下拉列表的问题。我需要用它来悬停div的右边框对齐：
enter image description here 这是代码：下拉对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; 

     }

来源

2012-03-24 1110

在#hoverDiv，加position:relative

In #hoverDiv：hover div.showme：
删除float:left（冗余）
删除position:relative（冗余）
删除margin-left:5px & & margin-right:5px，除非你喜欢他们

在div.showme：
删除float:left（冗余）
删除left:-999em（冗余）
替换left:auto与right:0

这jsFiddle已完成所有工作。

来源

2012-03-24 16:51:23

如果我这样做，那么我不会下拉。 – 1110 2012-03-24 16:55:36

@ 1110更新了答案。按照我收集的意图按预期工作。 – 2012-03-24 17:05:56

你对你的.showme DIV悬停添加margin-left:5px，删除它应该对齐：

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

来源

2012-03-24 16:59:43

在#hoverDiv:hover .showme删除margin-left和margin-right。

在.showme除去margin和修改padding到10px 0px 0px 0px，和border: 1px到0px。

来源

2012-03-24 17:00:52 Hoon

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

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

注意，在这两种情况下，蓝框的宽度是120px，他们一致根据红色框的左侧和右侧采用margin。

希望这有助于。

来源

2012-03-24 17:04:20 DriftingSteps

下拉对div悬停 - 下拉对齐问题

回答

相关问题