Bir divanı diğerinin altına nasıl hizalarım?

Question

Jquery'de bir açılır menü oluşturdum ve mükemmel çalışıyor ancak menünün konumlandırılmasıyla ilgili tek bir sorunum var. JQuery animasyonlarını öğrendikten hemen sonra menüyü yarattım ve hala yeni başlayan biriyim, bu yüzden herhangi bir öğreticiyi takip etmedim.

Bu yüzden menüyü düğmenin altına nasıl yerleştirebilirim diye merak ediyordum?

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

Menü, mutlak bir konum kullanılarak düğmenin altında ayarlanır. İşte

sitesi böyle görünüyor tam ekran iken: İşte

sitesi böyle görünüyor pencereli ederken:

JQuery/JScript veya CSS ile bunu öğrenmek istiyorum

.

Answer 1

Sen bu sorunu nedeniyle yaşıyorsanız Menü, pencere genişliği değiştiğinde, menünün konumunu değiştirdiğinden, body'a göre konumlanıyor. Bu sorunu çözmek için link ve menünüzü position: relative ile bir öğeye yerleştirmek istiyorsunuz.

Bu

sonra Açıkçası daha iyi olur yapabilirsiniz mutlak konum kaba menü göreli kendi içinde. Yani bir şey

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

gibi satır içi stilleri kullanmak yerine kaba bir sınıf uygulamamaya anlamına gelecektir

Şu anda bu yerleşimi oluşturan CSS'yi sağlayan

Answer 2

Wrap nav ve menü div konumunda bir div ve uygulamak menü div pozisyon buna göre çalışacak hangi:

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