Link to home
Start Free TrialLog in
Avatar of jellydeal
jellydeal

asked on

css <UL> z-index not working

HI,
I have a double row css menu created as <UL>. the problem is the upper rows sub menu appears underneath the lower rows menus?? I have fiddles with Z-index but it does not seem to have any affect?

With the code below you will see the top two sub menus have have the first submenu (aaaa) hidden behind the second row <ul>

User generated image
<html>
<head>
<meta charset="utf-8">
<style>
.menu_rules {
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	float: left;
	width: 250px;
}
#menu_rules ul {
	text-align: center;
	margin: 0;
	padding: 15px 4px 17px 0;
	list-style: none;
	width: 100%;
}
#menu_rules ul li {
	white-space: nowrap;
	position: relative;
	padding: 5px 10px;
	background: #fff;
	cursor: pointer;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	float: left;
	width: 105px;
	color:black;
	background-color:grey;
}
ul li a {
	color: #ffffff;
	text-decoration: none;
}
#menu_rules ul li ul {
	display: table-cell;
	padding: 0;
	position: absolute;
	top: 21px;
	left: 0;
	width: auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-transition: opacity 0.2s;
}
#menu_rules ul li ul li {
	background: #555;
	display: block;
	color: #fff;
	width: 200px;
}
#menu_rules ul li ul li:hover {
	background: #666;
}
#menu_rules ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}
</style>
</head>
<body>
<div id="menu_rules" class="menu_rules">
  <ul>
    <li >11111111
      <ul>
        <li >aaaa</li>
        <li >bbbb</li>
        <li >ccccc</li>
        <li >ddddd</li>
        <li >eeeee</li>
      </ul>
    </li>
    <li >22222222
      <ul>
       <li >aaaa</li>
        <li >bbbb</li>
        <li >ccccc</li>
        <li >ddddd</li>
        <li >eeeee</li>
      </ul>
    </li>
    <li>33333333
      <ul>
       <li >aaaa</li>
        <li >bbbb</li>
        <li >ccccc</li>
        <li >ddddd</li>
        <li >eeeee</li>
      </ul>
    </li>
    <li >44444444
      <ul>
         <li >aaaa</li>
        <li >bbbb</li>
        <li >ccccc</li>
        <li >ddddd</li>
        <li >eeeee</li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jellydeal
jellydeal

ASKER

Hi,
I took the z-index out as they didn't make any difference. Can you please explain what you mean?
Thanks
Using structure based declarations like:

#menu_rules ul li ul {
	display: table-cell;
	padding: 0;
	position: absolute;
	top: 21px;
	left: 0;
	width: auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-transition: opacity 0.2s;
}
#menu_rules ul li ul li {
	background: #555;
	display: block;
	color: #fff;
	width: 200px;
}
#menu_rules ul li ul li:hover {
	background: #666;
}
#menu_rules ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

Open in new window


guarantees maintenance problems longer debugging time and glass like pages that are easily broken.  All you need are classes for the ul and li tags for the specific values they need and then the cascade from ancestor elements will be inherited.  With the kind of declorations you are using, and change in the page may produce unpredictable results because you have the cascade depending on the least specific form of declaration (the tag name) and id or class declaration or any tag name declaration occurring after these rules has the potential to override the properties in these declarations if they affect any portion of the long chain of elements you are creating.

It will also limit your ability to use plugins and themes that script rules that generally override al kind of things.  You can get thing to work that way, but you will end up spending more time fixing things than doing new stuff.


Cd&
Ok, thanks.
Can you tell me though if what Im trying to achieve can be done?
With CSS you can position any element where it needs to be in all three dimensions.  However don't over thin it.  Keep the CSS simple so it parse more quickly, Don't use jquery for anything that can be done with the markup or CSS, because it bloats the page, creates long term maintenance problems and frequently screws up the Document Object.  Jquery is the most thing ever invented, because it pretends to be a tool for use by a novice; when in fact it should only be used by skilled experienced developers who understand what is going on behind the abstracted code.

Cd&
No solution provided but general advice on cas which helped
The C is quite insulting.  I provided you with the information you need to solve the problem.  If you are not capable of implementing that is an educational issue you should address or hire someone to do the work for you.  

Note that the question sat around 8 hours without a response instead of the average response time of less than an hour.  I will avoid being further insulted by ignoring your questions in the future.

Cd&