अन्य लिंक के नीचे ड्रॉपडाउन मेनू दिखाया गया है

मेरे द्वारा खरीदी गई थीम को लेकर मुझे कुछ परेशानी हो रही है। जब भी किसी <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 में समस्या को दर्शाती है: