inline-block nowrap Ausgabe der Größe

Question

Ich habe versucht, bin jedoch eine nowrap Navigation mit CSS zu machen, wenn ich über die übergeordnete Liste aus Mangel an einer besseren Beschreibung schweben springt HTML

html { 
 
     overflow-x: hidden; 
 
    } 
 
    ul li{ 
 
     list-style:none; 
 
    } 
 
    nav{ 
 
     margin: 0 -9999rem; 
 
     padding: 0.25rem 9999rem; 
 
     height:40px; 
 
     background-color:white; 
 
     overflow:hidden; 
 
    } 
 

 
    nav .user-nav{ 
 
     position:absolute; 
 
     white-space:nowrap; 
 
    } 
 
    nav .user-nav > li{ 
 
      display: inline-block; 
 
     margin: 0 10px; 
 
    } 
 

 
    nav .user-nav li a{ 
 
     text-decoration:none; 
 
     color:black; 
 
    } 
 

 
    nav .user-nav li a:hover{ 
 
     color:red; 
 
    } 
 
    nav .user-nav > .interact li{ 
 
     display:none; 
 
     background-color:white; 
 
     padding:10px; 
 
    } 
 
    nav .user-nav > .interact:hover li{ 
 
     display:block; 
 
    } 
 

 
    nav .user-nav > .interact li:hover{ 
 
     color:red; 
 
    }

<nav> 
 
     <ul class="user-nav"> 
 
      <li><a href="">Reccent reviews</a></li> 
 
      <li><a href="">Reccent addtions</a></li> 
 
      <li class="interact"><a href="">Login/Register</a> 
 
       <ul> 
 
       <li><a href="">Login</a></li> 
 
       <li><a href="">Register</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </nav>

ich habe es zu einer Geige unter

https://jsfiddle.net/23e5aLp2/

I initiall y getan mit einem float aber seit dem Lesen ein bisschen mehr ich fand Inline-Block ist die bessere Option, das Problem ist, wie ich schon erwähnte die Elternliste scheint zu springen, wenn der Mauszeiger über das Dropdown-Menü

Answer 1

Machen Sie Ihre <ul> innerhalb von .interact absolut positioniert, wie:

.interact ul { 
    position: absolute; 
} 

.interact ul { 
 
    position: absolute; 
 
} 
 

 
html { 
 
     overflow-x: hidden; 
 
    } 
 
    ul li{ 
 
     list-style:none; 
 
    } 
 
    nav{ 
 
     margin: 0 -9999rem; 
 
     padding: 0.25rem 9999rem; 
 
     height:40px; 
 
     background-color:white; 
 
     overflow:hidden; 
 
    } 
 

 
    nav .user-nav{ 
 
     position:absolute; 
 
     white-space:nowrap; 
 
    } 
 
    nav .user-nav > li{ 
 
      display: inline-block; 
 
     margin: 0 10px; 
 
    } 
 

 
    nav .user-nav li a{ 
 
     text-decoration:none; 
 
     color:black; 
 
    } 
 

 
    nav .user-nav li a:hover{ 
 
     color:red; 
 
    } 
 
    nav .user-nav > .interact li{ 
 
     display:none; 
 
     background-color:white; 
 
     padding:10px; 
 
    } 
 
    nav .user-nav > .interact:hover li{ 
 
     display:block; 
 
    } 
 

 
    nav .user-nav > .interact li:hover{ 
 
     color:red; 
 
    }

<nav> 
 
     <ul class="user-nav"> 
 
      <li><a href="">Reccent reviews</a></li> 
 
      <li><a href="">Reccent addtions</a></li> 
 
      <li class="interact"><a href="">Login/Register</a> 
 
       <ul> 
 
       <li><a href="">Login</a></li> 
 
       <li><a href="">Register</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </nav>

hoffe, das hilft!

Answer 2

Ich würde empfehlen zu verwenden inline-table oder inline-block für Klasse nav .user-nav li

Fiddle

Answer 3

sein, weil die Listenelemente Blockelemente sind, so dass der Behälter in der Größe größer zu machen, wenn sie in laichen. Machen sie die Drop-Down-Produkte absolute und Ihr Problem gelöst werden.

http://prntscr.com/ddn5xe

http://prntscr.com/ddn5gv

Was die nav Frage; Eine text-align: justify-Lösung könnte funktionieren oder eine flexbox-Lösung. Versuchen Sie, nach "nav justify text" oder "nav flexbox" zu suchen und Sie werden eine Fülle von Lösungen finden.

Answer 4

Tatsächlich funktioniert der Inline-Block gut, wenn Sie den gleichen Inhalt in allen Inline-Blockelementen hinzufügen, aber da sie Blockelemente sind, werden die Standardeinstellungen das div um den darin enthaltenen Inhalt wickeln. Um sicherzustellen, dass der Inhalt in der Zeile korrekt ausgerichtet ist, müssen Sie in der CSS der Inline-Block-Elemente die Eigenschaften für die Inhaltsausrichtung speziell zuweisen.

Die einfachste Lösung in Ihrem Szenario ist einfach hinzufügen vertical-align:top; der nav .user-nav > li Klasse oder das Element mit der display:inline-block; Eigenschaft und das Problem wird gelöst werden.

Hoffe, das hilft.