Click here to Skip to main content
12,398,181 members (60,159 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: CSS
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:

<img>http://im24.gulfup.com/2012-07-31/1343690359371.png</img>


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>
Posted 30-Jul-12 13:41pm
Nuha IT663
Updated 30-Jul-12 13:47pm
v3
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Start here[^].
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

The problem was only with px property, I set z-index:10, and it worked!
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160721.1 | Last Updated 30 Jul 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100