Question

这里的每件事情都正常，只有问题是new_r_div没有显示在

下面

 <a href="#">Response Request</a>'

如何做到这一点。

您可以看到代码here

HTML：

 <div id="response"> I found this to be a very nice solution. If you had floating children and non floating children, the height will automatically be adjusted to the min amount of space needed. The width is set to 100% to expand to the
this is a
   <a href="#">Response Request</a>
   <div class="new_r_div">
   <ul>
      <li><a href="#" class="link" >Confirm</a></li>
      <li><a href="#" class="link" >Delete</a></li>
   </ul>
 </div>
</div>

CSS：

 .new_r_div{
   position:absolute;
   width:100px;
   height:40px;
   background:#ccc;
    overflow: hidden;
   border: solid 2px #ccc;
 background: #99CCFF;
  z-index: 9999;
   -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 visibility: hidden;
}

#response:hover .new_r_div
 {
   visibility: visible;
}
   .new_r_div li:hover{
      background:red;
  }

Answer 1

这可以使用jQuery完成..只需将以下jQuery添加到您的代码中..

$(function(){ setDiv(); });  //Executes on refresh
$(window).resize(function () { setDiv();});  //Executes on page resize

function setDiv(){
    var aLeft = $('#response>a').offset().left;
    $('.new_r_div').css({'left' : aLeft});
}

Working Fiddle

Answer 2

我想你想要像=＆gt;这样的东西jsfiddle Link。

您必须在css中进行一些更改，如图所示。

.new_r_div {
    display:inline-block;   
    margin-top:20px;
    margin-left:-102px; 
    position:absolute;
    width:100px;   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;
    visibility: hidden;
}

Answer 3

请参阅此链接我希望这对您有所帮助。 jsfiddle.net/QQvv6/34 /

如何在链接下方显示div

3 个答案: