|
Unwanted transparency in vertical "fly out" menu
|
4dam
#:3605363
| 3:24 pm on Mar. 19, 2008 (utc 0) |
I am trying to create a vertical "fly out" menu in CSS, but I am having some problems. When I hover to expand the menu, the box in which the links appear is transparant, showing the content below and rendering the menu unreadable. I did manage to get it to work in IE7 by adding z-index: -1 to the #maincolumn area, and making the #leftcolumn z-index: 1, but this ended up hiding the content within the #maincolumn area in Firefox. Please see the code below. I have removed irrelevant code, and left what is necessary to create a "test case". Thanks in advance.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#outer {
width: 800px;
margin:auto;
border: 1px solid #000000;
}
#leftcolumn {
position: relative;
width: 198px;
float: left;
border-right: 1px solid black;
}
#leftcolumn li {
position: relative;
}
#leftcolumn ul ul {
position: absolute;
top: 0;
left: 50%;
}
#leftcolumn li li {
background: #ba9765;
width: 150px;
}
div#leftcolumn ul ul,
div#leftcolumn ul li:hover ul ul
{display: none;}
div#leftcolumn ul li:hover ul,
div#leftcolumn ul ul li:hover ul
{display: block;}
#maincolumn {
position: relative;
float: right;
width: 580px;
}
#footer {
height: 20px;
width: 800px;
clear: both;
border-top: 1px solid black;
}
-->
</style>
</head>
<body>
<div id="outer">
<div id="leftcolumn">
<ul>
<li><a href="/products-range.asp?range=2">Main link 1</a>
<ul>
<li><a href="/products-category.asp?cat=36">link</a></li>
<li><a href="/products-category.asp?cat=37">link</a></li>
<li><a href="/products-category.asp?cat=39">link</a></li>
<li><a href="/products-category.asp?cat=107">link</a></li>
</ul>
</li>
<li><a href="/products-range.asp?range=15">Main Link 2</a>
<ul>
<li><a href="/products-category.asp?cat=40">link</a></li>
<li><a href="/products-category.asp?cat=41">link</a></li>
<li><a href="/products-category.asp?cat=42">link</a></li>
<li><a href="/products-category.asp?cat=72">link</a></li>
</ul>
</li>
</ul>
</div>
<div id="maincolumn" >
<p>The content in this area is visible through the pull out menu </p>
<p>The content in this area is visible through the pull out menu </p>
</div>
<div id="footer">The content in the footer is not visible beneath the box
</div>
</div>
</body>
</html>
[edited by: 4dam at 3:59 pm (utc) on Mar. 19, 2008]
|
DrDoc
#:3605390
| 3:56 pm on Mar. 19, 2008 (utc 0) |
Welcome to WebmasterWorld! | I did manage to get it to work in IE7 by adding z-index: -1 to the #maincolumn area, and making the #leftcolumn z-index: 1, but this ended up hiding the content within the #maincolumn area in Firefox. |
|
Did you try setting the z-index to 1 and 2 respectively?
|
SuzyUK
#:3605401
| 4:04 pm on Mar. 19, 2008 (utc 0) |
Hi 4dam and Welcome to WebmasterWorld! think this is hasLayout, but unfortunately the wrong way around and though I can see a few ways to work around it I'm not sure which would be best for you. 1. removing position: relative off the main content does it, but you might want positioning inside that div later so you might need that to stay, even if you don't need it yet.. you might later so not the best solution imho. 2. do you fancy having source ordering ;) because simply putting the content div before leftmenu in the source fixes it 3. remove position: relative off the #leftcolumn and then change the li rules to:
#leftcolumn li {
margin: 1px 0 0 0;
} #leftcolumn li:hover {
position: relative;
z-index: 1;
} |
|
there's possibly some other ways but it depends on which suits you best.. see how you get on and if none of these suit or work, let us know!
|
4dam
#:3605405
| 4:05 pm on Mar. 19, 2008 (utc 0) |
RE: Dr Doc "Did you try setting the z-index to 1 and 2 respectively? " I'm absolutely positive I did, and it didn't work, but upon trying there, it worked perfectly. God I feel like such an idiot, this has had me stumped for a day. Thank you!
|
SuzyUK
#:3605415
| 4:14 pm on Mar. 19, 2008 (utc 0) |
4dam.. you're not an idiot ;)
honestly it's IE it shouldn't mess with that z-index in the first place .. I still recommend you do the li and li:hover thing too.. 1. the z-index is for exactly the same reason as you just posted - in that IE does mess with the stack, and 2. without a li:hover rule in place.. IE can and does have trouble with li:hover ul rules at the minute your menu isn't exhibiting it.. but you never know [edited by: SuzyUK at 4:14 pm (utc) on Mar. 19, 2008]
|
4dam
#:3605418
| 4:15 pm on Mar. 19, 2008 (utc 0) |
Thanks Suzy, Thanks for all your help. As I metioned the z-index thing worked, but I may try reverting to some of your ideas if things start going wrong when i'm testing in other browsers. I'm not the most skilled in CSS, just kind of bodge along..... Thanks for the speedy response, I posted this on another large css forum a few days ago, and have had no reply. Cheers!
|
4dam
#:3605420
| 4:17 pm on Mar. 19, 2008 (utc 0) |
Damn cross posting! Cheers, I'll do that too, better to be safe than sorry.
|
4dam
#:3605535
| 5:26 pm on Mar. 19, 2008 (utc 0) |
Without wanting to spam up the board with more of my problems, I'll add this here, as it's still related to the same menu. How do I expand the trigger area for the hover? Basically, I want my sub menu to float slightly to the right of the the parent menu, but if the user was to move the mouse from the parent menu to the submenu, when it reaches the space i between the submenu disappears. How do I get the blank space between the menus to still trigger the hovering submenu? Thanks again.......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#outer {
width: 800px;
margin:auto;
}
#leftcolumn {
position: relative;
width: 198px;
float: left;
border-right: 1px solid black;
background: #ba9765;
z-index: 2;
}
#leftcolumn li {
list-style: none;
margin: 1px 0px 0px 0px;
}
#leftcolumn li:hover {
position: relative;
z-index: 2;
}
#leftcolumn ul ul {
position: absolute;
top: 0;
left: 110%;
}
#leftcolumn li li {
background: #ba9765;
width: 150px;
}
div#leftcolumn ul ul,
div#leftcolumn ul li:hover ul ul
{display: none;}
div#leftcolumn ul li:hover ul,
div#leftcolumn ul ul li:hover ul
{display: block;}
#maincolumn {
float: right;
width: 580px;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="outer">
<div id="leftcolumn">
<ul>
<li><a href="/">Main link 1</a>
<ul>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
</ul>
</li>
</ul>
</div>
<div id="maincolumn" >
<p>content </p>
</div>
</div>
</body>
</html>
|
SuzyUK
#:3605678
| 7:28 pm on Mar. 19, 2008 (utc 0) |
4dam..
not tried it but I think you would need to make the (first level) li wider than the link it contains.. the li:hover which triggers the drop will need to be as wide so that you do not lose the focus on it until you reach the drop.. that may mean it overlaps the content but if it's transparent you wouldn't notice it? however I've not tested this it's just theory and don't how the overflow would react especially in IE
|
4dam
#:3606198
| 9:16 am on Mar. 20, 2008 (utc 0) |
Cheers, That's worked in IE 7 and Firefox, haven't got any older browsers handy at the mo for testing
|
