Наведение мыши происходит вокруг элемента не только на элементе

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

Добавить warpper в меню пользователя, как это увидеть Snippet

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

Просто дать float к .dropdown.

.dropdown { 
    float: left; 
} 

JSFiddle

Answer 3

Вы можете попробовать это когда-то

.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; 
 
}

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

JSFiddle

Надеюсь, это может вам помочь.

Answer 4

Изменение CSS к следующему:

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

из

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

Fiddle