मैं एक div के तहत एक div सही कैसे संरेखित कर सकते हैं?

Question

मैंने jquery में एक ड्रॉप-डाउन मेनू बनाया और यह पूरी तरह से काम कर रहा है लेकिन मुझे मेनू की स्थिति के साथ केवल एक समस्या है। मैंने jquery एनिमेशन के बारे में सीखे जाने के बाद मेनू बनाया और मैं अभी भी एक नौसिखिया हूं इसलिए मैंने किसी भी ट्यूटोरियल का पालन नहीं किया।

तो मैं सोच रहा था कि मैं बटन को बटन के नीचे कैसे रख सकता हूं?

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

मेनू पूर्ण स्थिति का उपयोग कर बटन के नीचे सेट किया गया है।

यहाँ कैसे साइट लग रहा है, जबकि पूर्ण स्क्रीन:

यहाँ कैसे साइट लग रहा है विडों जबकि:

मैं कैसे JQuery/JScript या सीएसएस के साथ ऐसा करना सीखना चाहेंगे ।

Answer 1

आपको लगता है कि समस्या हो रही हो, क्योंकि मेनू body से संबंधित स्थिति है, इसलिए विंडो की चौड़ाई मेनू चाल की स्थिति बदलती है। इस समस्या को हल करने के लिए आप अपने लिंक और मेनू को तत्व में position: relative पर रखना चाहते हैं।

यह तो मतलब है कि इनलाइन शैलियों का उपयोग करने के लिए नहीं कर सकते हैं निरपेक्ष स्थिति कंटेनर के लिए अपने मेनू रिश्तेदार अपने में। तो

की तरह कुछ

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

जाहिर है यह बेहतर है और बदले में कंटेनर के लिए एक वर्ग लागू

Answer 2

लपेटें एनएवी और मेनू div एक div में और सापेक्ष स्थिति लागू है जिसके द्वारा अपने मेनू div स्थिति के हिसाब से काम करेगा:

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

सीएसएस:

.relative{ 
    position: relative; 
}