• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 210
  • Last Modified:

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>

Sub menu hidden behind 2nd row menu item
<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

0
jellydeal
Asked:
jellydeal
  • 4
  • 3
1 Solution
 
COBOLdinosaurCommented:
I don't see any z-index. When you bind the styling to the structure instead of allowing the natural cascade you almost always end up with inheritance issues.  you would be much better off using classes on the <li> elements instead of using declarations that are nothing but a long string of tag names waiting for a chance to break.

Cd&
0
 
jellydealAuthor Commented:
Hi,
I took the z-index out as they didn't make any difference. Can you please explain what you mean?
Thanks
0
 
COBOLdinosaurCommented:
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&
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
jellydealAuthor Commented:
Ok, thanks.
Can you tell me though if what Im trying to achieve can be done?
0
 
COBOLdinosaurCommented:
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&
0
 
jellydealAuthor Commented:
No solution provided but general advice on cas which helped
0
 
COBOLdinosaurCommented:
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&
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now