Forum Moderators: not2easy
I am in dire need for the solution of this problem. I am getting the nested categories of my catnav behind the page elements like Google Ads, Youtube Video player or any other graphics. However, they are coming over the text as they should. I am using "pixeled" theme.
Can anyone help me with the CSS coding as how to make them pop out over the page elements? Any help would be helpful. Thanks!
[edited by: eelixduppy at 4:27 pm (utc) on Mar. 13, 2009]
[edit reason] removed URL [/edit]
To put it over a youtube player or an iframe or so in general, you don;t need to do much special at all.
e.g. a basic drop down menu already goes over an iframe:
<!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</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
.menu {
background-color: yellow;
}
.menu li {
list-style: none;
}
.menu>li {
position: relative;
display: inline;
background-color: red;
padding-left: 0.5em;
}
.menu ul {
display: none;
}
.menu li:hover ul {
display: block;
position: absolute;
top: 1em;
left: 1em;
background-color: orange;
}
iframe {
width: 100%;
height: 10em;
border: 0;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">first menu</a>
<ul>
<li><a href="#">1.1 item</a></li>
<li><a href="#">1.2 item</a></li>
<li><a href="#">1.3 item</a></li>
</ul>
</li>
<li><a href="#">second menu</a>
<ul>
<li><a href="#">2.1 item</a></li>
<li><a href="#">2.2 item</a></li>
<li><a href="#">2.3 item</a></li>
</ul>
</li>
</ul>
<iframe src="test.html" ></iframe>
</body>
</html>
