Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css <UL> z-index not working

Posted on 2014-10-28
7
Medium Priority
?
194 Views
Last Modified: 2014-11-02
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
Comment
Question by:jellydeal
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 40409386
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
 

Author Comment

by:jellydeal
ID: 40409451
Hi,
I took the z-index out as they didn't make any difference. Can you please explain what you mean?
Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40409528
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:jellydeal
ID: 40410301
Ok, thanks.
Can you tell me though if what Im trying to achieve can be done?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40416489
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
 

Author Closing Comment

by:jellydeal
ID: 40416960
No solution provided but general advice on cas which helped
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40418182
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question