Solved

css <UL> z-index not working

Posted on 2014-10-28
7
171 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
  • 4
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now