鼠标悬停发生在元素周围而不仅仅是元素上

Question

当我将鼠标放在靠近元素右侧的任何位置时，鼠标悬停显示列表。我希望仅在光标放在元素上时显示它。请让我知道我该怎么做。

<div class="dropdown">
      <a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-user"></span> User</a>
       <div class="dropdown-content">
      <span class="glyphicons glyphicons-user"></span>
      <a href="#">My Account</a>
      <a href="#">Logout</a>
     </div>
     <input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;"></input>
       </div>

http://jsfiddle.net/Rahul_16/MMHVv/24/

Answer 1

将您的CSS更改为以下内容：

.btn:hover + .dropdown-content 
{
    display: block;
}

来自

.dropdown:hover .dropdown-content 
{
    display: block;
}

<强> Fiddle

Answer 2

只需向float提供.dropdown。

.dropdown {
    float: left;
}

<强> JSFiddle

Answer 3

为您的用户菜单添加一个warpper，如下所示 的段

.dropdown {
bottom: 50px;
left:600px;
}
#usermenu{
  float:left;
  margin-right: 7px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

#usermenu:hover .dropdown-content 
{
display: block;
}

.dropdown:hover .dropbtn 
{
background-color: #3e8e41;
}
  

<div class="dropdown">
  <div id="usermenu">
 <a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-user"></span> User</a>
 <div class="dropdown-content">
   <span class="glyphicons glyphicons-user"></span>
    <a href="#">My Account</a>
    <a href="#">Logout</a>
 </div>
  </div>
   <input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;"></input>
</div>

Answer 4

你可以尝试一次吗

＆＃13;

＆＃13;

.dropdown {
  bottom: 50px;
  left: 600px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

＆＃13;

<span class="dropdown">
      <a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-user"></span> User</a>
<div class="dropdown-content">
  <span class="glyphicons glyphicons-user"></span>
  <a href="#">My Account</a>
  <a href="#">Logout</a>
</div>
<input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;" />
</span>

＆＃13;

＆＃13;

＆＃13;

<强> JSFiddle

希望它可以帮到你。