locked
CSS Problem: How to control the z-index? RRS feed

  • Question

  • User1601851954 posted

    Hi guys,

    I have in my website a menu and down to it there is an auto-playing slider, the menu has long sub-menus, and the problem when I open the menu I cannot see the whole list of sub-menus; the moving slider hides it. It just come over the menu.
    I tried to edit the CSS, the z-index attribute, but still the same problem.
    I want the sub-menu over the slider.

    Here is the picture:




    Here are the design code of menu

    <div id="menus" style="z-index: 10px;">
            <ul class="menus">
                <li><a href="index.aspx"><span>Home</span></a></li>
                <li><a class="parent"><span>Educational Plan</span></a>
                    <ul>
                        <li><a href="#" class="parent"><span>Education Faculty</span></a>
                            <ul>
                                <li><a href="#"><span>Curricula & Teaching Methods Dep.</span></a></li>
                                <li><a href="#"><span>Educational Mgmt. Supervision Dep.</span></a></li>
                                <li><a href="#"><span>Islamic Studies Dep.</span></a></li>
                                <li><a href="#"><span>Educational Mgmt. Supervision Dep.</span></a></li>
                                <li><a href="#"><span>Islamic Studies Dep.</span></a></li>
                                <li><a href="#"><span>Lingustics Dep.</span></a></li>
                                <li><a href="#"><span>Literatures Dep.</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>




    and this is the design code of slider

    <div id="prew_img" style="z-index: 3px;">
                <ul class="round">
                    <li>
                        <img src="images/header1.jpg" alt="" /></li>
                    <li>
                        <img src="images/header2.jpg" alt="" /></li>
                    <li>
                        <img src="images/header3.jpg" alt="" /></li>
                    <li>
                        <img src="images/header4.jpg" alt="" /></li>
                    <li>
                        <img src="images/header5.jpg" alt="" /></li>
                    <li>
                        <img src="images/header6.jpg" alt="" /></li>
                </ul>
            </div>



    Monday, July 30, 2012 7:49 PM

Answers

  • User1042380557 posted

    Hi,

    z-index property is not in px unit, it is just a integer value. ex: style="z-index: 10;"
    If you want that menu renders forward, set z-index with a greatest value like 99999, because some components do it and low values will not help. Try some values, if does't work yet, the problem is another part.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 30, 2012 9:25 PM

All replies

  • User1042380557 posted

    Hi,

    z-index property is not in px unit, it is just a integer value. ex: style="z-index: 10;"
    If you want that menu renders forward, set z-index with a greatest value like 99999, because some components do it and low values will not help. Try some values, if does't work yet, the problem is another part.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 30, 2012 9:25 PM
  • User1601851954 posted

    The problem was with the px property, I have changed to only an integer and it worked!

    Thank you :)

    Monday, July 30, 2012 10:20 PM