मेरे द्वारा खरीदी गई थीम को लेकर मुझे कुछ परेशानी हो रही है। जब भी किसी <a href> को दूसरे <a href> के ऊपर मँडराते हैं, तो ड्रॉपडाउन-मेनू नीचे दिखाया जाता है और सब कुछ के ऊपर दिखाया जाना चाहिए।

मेरा पहला ध्यान / प्रयास सूचकांक को बदलने के लिए था, इस मामले में <div class="dropdown-menu"> के z-index को <a href> से अधिक संख्या में बढ़ाएं, लेकिन यह काम नहीं किया।

तो, यह मेरी एचटीएमएल संरचना है:

<li class="top_level dropdown">
    <a href="#">Category B</a>
    <div class="dropdown-menu megamenu column1" style="">
        <div class="dropdown-inner">
            <ul class="list-unstyled childs_1">
                <li>
                    <a href="#">Category B - A</a>
                </li>
                <li>
                    <a href="#">Category B - B</a>
                </li>
                <li>
                    <a href="#">Category B - C</a>
                </li>
            </ul>
        </div>
    </div>
</li>

और निम्न छवि JSFiddle में समस्या को दर्शाती है:

enter image description here

1
Linesofcode 30 अक्टूबर 2019, 22:42

1 उत्तर

सबसे बढ़िया उत्तर

सीएसएस एक तरह की गड़बड़ है, लेकिन मुझे समस्या मिली! आप z-index:20 को मुख्य मेनू li तत्वों पर सेट कर रहे हैं। जैसा कि उन सभी में समान z-index है, जो बाद में मार्कअप में दिखाई देते हैं, वे ओवरलैप होने पर शीर्ष पर आते हैं। यदि आपका मेनू एक पंक्ति में था, तो आप इसे नोटिस नहीं करेंगे। उनके बच्चों का z-index इस संदर्भ में प्रासंगिक नहीं है, केवल माता-पिता। बस इसे हटा दें:

z-index fun

2
ezakto 30 अक्टूबर 2019, 20:01