CSS-Dropdown-Menü mit W3schools Beispiel

Question

Ich versuche, ein Dropdown-Menü mit W3schools Beispielmethode zu erstellen, aber ich kann nicht scheinen, das Menü geöffnet zu bleiben, wenn Sie den Cursor von der Schaltfläche weg bewegen. Zuerst dachte ich, dass mein Code falsch war, also habe ich den W3schools-Code direkt in meine Dateien kopiert, aber immer noch das gleiche Ergebnis.

CSS-Code:

.personal-dropbtn { 
    border: none; 
    cursor: pointer; 
} 

.personal-dropdown { 
    position: relative; 
    display: inline-block; 
} 

.personal-dropdown-content { 
    background: #DDD; 
    display: none; 
    position: absolute; 
    right: 0; 
} 

.personal-dropdown-content a { 
    display: block; 
} 

.personal-dropdown-content a:hover { 
} 

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

HTML-Code:

<% if user_signed_in? %> 
    <div class="personal-dropdown"> 
     <button class="personal-dropbtn"><%= current_user.username %></button> 
     <div class="personal-dropdown-content"> 
      <%= link_to 'Profil', user_path(current_user) %> 
      <%= link_to 'Logg ut', destroy_user_session_path %> 
      <%= link_to 'Lag quiz', new_quiz_path %> 
     </div> 
    </div> 

Wie Sie sehen können, bin ich unter Verwendung Ruby on Rails, die Website zu erstellen. Ich frage mich, ob das die Speisekarte irgendwie kaputt machen könnte? Ich habe meinen Code ohne die Rubininjektion in JSfiddle gesteckt und es hat dort funktioniert, also kann ich nur schlussfolgern, dass Rails irgendwie stören könnte?

EDIT: resultierende HTML-Code, wenn die Seite geladen wird:

<div class="container"> 
    <div class="row header"> 
     <div class="col xs-6 col-md-3 logo"> 
      <img src="/assets/logo.png"> 
     </div> 
     <div class="col-xs-6 col-md-9 header-content"> 
      <div class="row"> 
       <div class="col-md-12 personal"> 
        <div class="personal-dropdown pull-right"> 
         <button class="personal-dropbtn">asdfasdf</button> 
         <div class="personal-dropdown-content"> 
          <a href="https://stackoverflow.com/users/2">Profil</a> 
          <a href="https://stackoverflow.com/users/sign_out">Logg ut</a> 
          <a href="/quiz/new">Lag quiz</a> 
         </div> 
        </div> 
       </div> 

Answer 1

Ich denke, Sie sollten den Wähler ändern, in dem Sie die Anzeige eingestellt: keine für den Inhalt:

.personal-dropbtn { 
    border: none; 
    cursor: pointer; 
} 

.personal-dropdown { 
    position: relative; 
    display: inline-block; 
} 

.personal-dropdown .personal-dropdown-content { 
    background: #DDD; 
    display: none; 
    position: absolute; 
    right: 0; 
} 

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

Der Inhalt wird voraussichtlich verschwinden, wenn Sie das persönliche Dropdown verlassen, wenn es noch passiert, kann ich mir nur vorstellen, dass Sie das Dropdown verlassen, wenn Sie die Maus bewegen. Es ist möglich, dass einige der Elemente Leerzeichen hinzufügen, die das Problem verursachen.

Können Sie den resultierenden HTML-Code einfügen?

Danke.