Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS problem
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 14:41pm
Nuha IT654
Edited 30-Jul-12 14: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
0 OriginalGriff 490
1 Maciej Los 305
2 Richard MacCutchan 270
3 Mathew Soji 220
4 BillWoodruff 210
0 OriginalGriff 8,834
1 Sergey Alexandrovich Kryukov 7,477
2 DamithSL 5,689
3 Maciej Los 5,329
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web04 | 2.8.1411028.1 | Last Updated 30 Jul 2012
Copyright © CodeProject, 1999-2014
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