html - Drop down header issues -

नमस्कार, मेरे पास 2 शीर्षलेख हैं, जैसे:

जब मैं सूचना बटन पर क्लिक करता हूं, ड्रॉप डाउन हेडर लेआउट को तोड़ता है। स्क्रीनशॉट निम्नलिखित हैं

अधिसूचना ड्रॉपडाउन सीएसएस के रूप में अनुसरण करें

  # नोटिफिकेशन_ड्रॉपडाउन {-webkit-box-shadow: 0 0px 13px rgba (20, 20, 20, 0.5); -मोझ-बॉक्स-छाया: 0 0 पीएक्स 13 पीएक्स आरजीबीए (20, 20, 20, 0.5); बॉक्स-छाया: 0 0 पीएक्स 13 पीएक्स आरजीबीए (20, 20, 20, 0.5); पृष्ठभूमि: सफेद; सीमा: ठोस # 888888 1px; बाएं: 300px; चौड़ाई: 380 पिक्सेल; कुछ भी डिस्प्ले मत करो; बाईंओर तैरना; रंग: # 444444; }   
 क्या मैं यहाँ गलत कर रहा हूं?   
 
 
 स्थिति जोड़ें उसके माता-पिता के मुकाबले और खुद को पूर्ण स्थिति। ऐसा करने से यह लेआउट के लेयरिंग में आ जाएगा और आपके मौजूदा लेआउट को नहीं तोड़ देगा।  
 स्थिति को पूर्ण तरह से जोड़ें  
  #notification_dropdown {position: absolute; z- सूचकांक: 1; }   
 और उसके माता-पिता की तरह स्थिति को जोड़ना  
  parent_0f_dropdown {position: relative; }