Wie kann ich ein Div unter einem anderen ausrichten?

Question

Ich habe ein Drop-Down-Menü in Jquery erstellt und es funktioniert perfekt, aber ich habe nur ein Problem mit der Positionierung des Menüs. Ich habe das Menü erstellt, nachdem ich von JQuery-Animationen erfahren habe und ich bin immer noch ein Anfänger, also habe ich keine Tutorials verfolgt.

Also ich frage mich, wie kann ich das Menü direkt unter dem Button?

<div id="nav" class="grid_5"> 
    <a href=""> ABOUT </a> 
    <a id="products" href=""> PRODUCTS </a> 
    <a href=""> HOME </a> 
</div> 
<div id="menu"> 
    <a class="menuButton" href=""> Cakes </a><br> 
    <a class="menuButton" href=""> Cupcakes </a><br> 
    <a class="menuButton" href=""> Fudges </a><br> 
    <a class="menuButton" href=""> Ice Creams </a><br> 
    <a class="menuButton" href=""> Hard Candies </a> 
</div> 

Das Menü wird unter der Schaltfläche mit einer absoluten Position eingestellt.

Hier ist, wie die Seite aussieht, während Vollbild:

Hier ist, wie die Seite aussieht, während Fenster:

Ich mag würde lernen, wie dies zu tun mit JQuery/JScript oder CSS .

Answer 1

Sie haben das Problem, weil Das Menü wird relativ zum body positioniert, so dass die Fensterbreite die Position des Menüs ändert. Um dieses Problem zu lösen, möchten Sie Ihren Link und Ihr Menü in ein Element mit position: relative einfügen.

Dies bedeutet dann, dass Sie Ihr Menü in Bezug auf den Behälter seine absolute Position. So etwas wie

<div style="position: relative"> 
    <div id="nav" class="grid_5"> 
     <a href=""> ABOUT </a> 
     <a id="products" href=""> PRODUCTS </a> 
     <a href=""> HOME </a> 
    </div> 
    <!-- When you position this absolutely it will now be relative to the container --> 
    <div id="menu"> 
     <a class="menuButton" href=""> Cakes </a><br> 
     <a class="menuButton" href=""> Cupcakes </a><br> 
     <a class="menuButton" href=""> Fudges </a><br> 
     <a class="menuButton" href=""> Ice Creams </a><br> 
     <a class="menuButton" href=""> Hard Candies </a> 
    </div> 

Natürlich ist es nicht besser ist, Inline-Stile zu verwenden und stattdessen eine Klasse auf den Behälter gelten

Answer 2

Wrap nav und Menü div in einem div und gelten bezüglich der Position, durch die würde Ihr Menü div Position entsprechend arbeiten:

<div class="relative"> 
<div id="nav" class="grid_5"> 
    <a href=""> ABOUT </a> 
    <a id="products" href=""> PRODUCTS </a> 
    <a href=""> HOME </a> 
</div> 
<div id="menu"> 
    <a class="menuButton" href=""> Cakes </a><br> 
    <a class="menuButton" href=""> Cupcakes </a><br> 
    <a class="menuButton" href=""> Fudges </a><br> 
    <a class="menuButton" href=""> Ice Creams </a><br> 
    <a class="menuButton" href=""> Hard Candies </a> 
</div> 
</div> 

css:

.relative{ 
    position: relative; 
}