Solved

css <UL> z-index not working

Posted on 2014-10-28
7
188 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Send email using HTML and PHP in separate file 5 60
html form layout 4 53
Drag & Drop Error 5 33
all buttons are blocked on android mobile browsers 2 12
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …

752 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