Forum Moderators: not2easy
This what I have - below. (Have developed some pure CSS menus that are horizontal with vertical dropdowns) ( here I am playing with a simple example from a tutorial):
Do you have to go to Javascript to fix this. I hope not - I would like to keep it pure CSS. I have tried all sorts of options with the display property at the bottom of the css.
li:hover ul { display: block; }
Any help or a point in the right direction would be greatly appreciated.
===========================================================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li ul li{
display: inline;
width:750PX;
height:25px;
}
li:hover ul { display: block; }
</style>
</head>
<body>
<ul>
<li>Sunfishes
<ul>
<li><a href="">Blackbanded»
sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li>Grunts
<ul>
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>
<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
</html>
[edited by: tedster at 8:23 pm (utc) on May 8, 2008]
First I should mention that URL's are not permitted in posts (see TOS). That being said, I did look at the page and what you are trying to achieve uses a combination of CSS and javascript. Basically, the CSS defines the look, but the javascript controls the action. It is similar to a show/hide script on mouseover/mouseout event.
Since the site you mentioned uses free scripts (they are cited in the <head>), you could probably do a web search for them.
Marshall
Was hoping to do it all in CSS. Maybe CSS3? Oh well. I don't mid JavaScript that much. Time to dive in and create a hybird.
Thanks again!
