下拉對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懸停 - 下拉對齊問題

回答

相關問題