hover över class

kolasMedlem sedan mars 2001142 inlägg

2 juni 2005 13:11#1

Jag använder en meny från suckerfish för att få en hover effekt, men nu vill jag ha en iframe eller en div "class=scrollbox" för att få en fast storlek på det blocket som ligger precis under menyn.

Och då får jag inte menyn att fungera (i firefox) över det fasta blocket under. Se exempel nedan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>the Suckerfish</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 80%;
	background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
	padding: 2em;
	margin: 0;
}

html>body #content {
	width: 32em;
} 

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav a {
	font-weight: bold;
	color: green;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #7d6340;
	border-width: 0 5px;
}

li {
	float: left;
	position: relative;
	width: 10em;
	text-align: center;
	cursor: default;
	background-color: white;
	border: 1px solid #7d6340;
	border-width: 1px 0;
}

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;

	font-weight: normal;
	background: url(images/bg_nav.gif) bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #7d6340;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

	.scrollbox {position: absolute;
	padding: 10px; height: 100px; width: 300px; 
	border: 0px; overflow: auto; 
	background-color: grey}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">

<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" /></h1>

<hr />

<ul id="nav">

	<li id="first">
		<div><a href="">Overview</a></div>
		<ul>
			<li><a href="">Classification</a></li>
			<li><a href="">Physcial Characteristics</a></li>
			<li><a href="">Habitat</a></li>
			<li><a href="">Lifestyle</a></li>
			<li><a href="">Evolution</a></li>

			<li><a href="">Distribution</a></li>
		</ul>
	</li>

	<li>
		<div><a href="">Species</a></div>
		<ul>
			<li><a href="">Ceylonese remora</a></li>

			<li><a href="">Remora remora</a></li>
			<li><a href="">Sharksucker</a></li>
			<li><a href="">Slender remora</a></li>
			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Whitefin sharksucker</a></li>

		</ul>
	</li>

	<li id="last">
		<div><a href="">Links</a></div>
		<ul>
			<li><a href="">Remora remora</a></li>
			<li><a href="">Sharksucker</a></li>
			<li><a href="">Slender remora</a></li>
			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Whitefin sharksucker</a></li>
		</ul>
	</li>

</ul>

<hr /><br />

<div class="scrollbox">
Denna texten ligger i scrollboxen<br />

<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
lodr&auml;d scroll

</div>	

</div>

</body>

</html>

kolasMedlem sedan mars 2001142 inlägg

9 juni 2005 12:03#2

Hittade lösningen själv, http://www.htmldog.com/articles/suckerfish/dropdowns/