1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

css opacity on hover

z-index, position and margin

         

kingkol

7:38 am on Jul 22, 2011 (gmt 0)

10+ Year Member



Hi,

I am trying to build navigation menu.It consist 2 divs.one div for background(its opacity is .7) and another div for menu items.I stack these divs on top of each other by negative top-margin.but hover effect even "a" are not working when I set the opacity through css.How to fix that?any advice would be greatly appreciated.
code is like this
// this is background div
#nav_menu_bg
{
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;

}

//This is menu item divs,I even tried with z-index
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;
opacity:1;
z-index:1000;

}
#nav_menu ul
{
list-style:none;
padding-top:10px;
margin-left:25px;
}
#nav_menu ul li a
{
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;

}
#nav_menu ul li a:hover
{
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}

Thanks in advance

Paul_o_b

9:37 am on Jul 22, 2011 (gmt 0)

10+ Year Member



Hi,

z-index only applies to positioned elements so add position:relative to the #nav_menu.

I assume you have a structure like this: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#nav_menu_bg {
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;
}
#nav_menu {
width:620px;
height:65px;
margin-top:-65px;
position:relative;
z-index:1000;
}
#nav_menu ul {
list-style:none;
padding-top:10px;
margin:0 0 0 25px;
}
#nav_menu ul li a {
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;
}
#nav_menu ul li a:hover {
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
</style>
</head>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>
</html>

kingkol

11:34 am on Jul 22, 2011 (gmt 0)

10+ Year Member



Thank You so much.nav_menu required positioning. Its works.But to clarify could you please tell me why only negative margin didn't served the purpose?without giving z-index and position.

<style>
#nav_menu_bg
{
width:620px;
height:65px;
opacity:.7;
...
}
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;

}
</style>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>

Thanks once again.

Paul_o_b

12:35 pm on Jul 22, 2011 (gmt 0)

10+ Year Member



The overlapping of non positioned elements is not specifically defined in the specs (iirc) but usually the one that follows later in the html will go on top of one before if there are overlaps.

However, in your case this didn't happen because the #nav_menu_bg had opacity applied and I guess the browser treats this as more important because opacity applies to the parent and all its children as a whole. It's not inherited as such. The elements are all rendered and then opacity applied to them as a whole which is why you can't cut it off on inner elements - hence the need for your negative margin trick.

If you had added opacity:.99 to your #nav_menu then I believe it would have overlapped as you wished (opacity:1.0 means no opacity so does nothing really).

However, you are then leaving things to chance and expecting browsers all to behave the same. Therefore by adding position:relative and a higher z-index you avoid any mistakes a browser may make and control the situation yourself.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026