PDA

View Full Version : pure css menu


dubaco
08-13-2010, 04:59 PM
Hi
I've had so much problem with javascript menus, I've started building this one by adapting one from somewhere else. Everything is as I want it now (width and colour wise) except that as I move off a menu onto a dropdown, the flipping dropdown dissappears!
I thought it might be something to do with z valuse so had a play around with those, has anyone been here before and come out of the other side please?

All suggestions gratefully recieved.

The other nagging thing is that the menu item lengthens considerably when I assign a link page but only if it links to a page, not if it has a dropdown!

It works on it's own before being put into the page as you can see here:

http://www.woodendhouse.co.uk/tests/stumenu.htm

The full page is here (with slightly different menu items):

http://www.woodendhouse.co.uk/tests/stumenuinpage.html

Here is the css:

<style type="text/css">

#menu {
position:relative;
z-index:500;
height:100px;
width: 772px;
} /* height for this demo only */
#menu ul {
padding:0;
margin:0;
list-style:none;
padding:5px;
background:#99CC33;
}
#menu ul.level1 {height:30px;}
#menu ul ul {position:absolute; left:-9999px;}
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; left:-1px; top:-1px;}
#menu ul li {
background:#006633;
margin-right:5px;
float:left;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#menu ul li a {
display:block;
float:left;
color:#FFFFFF;
text-decoration:none;
border:1px solid #888;
border-color:#ddd #555 #555 #ddd;
background-color: #006633;
font-family: verdana, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 5px;
}
#menu ul li a.fly {
padding-right:15px;
background-color: #006633;
background-image: url(multi-line-dropdown/arrow.gif);
background-repeat: no-repeat;
background-position: right center;
color: #FFFFFF;
}

#menu ul ul li {margin:0;}
#menu ul ul li a {width:105px;}
#menu ul ul li a.fly {padding-right:10px;}

#menu ul li:hover {position:relative;}
#menu ul li a:hover {
direction:ltr;
background:#8a9;
color:#fff;
border-color:#8a9;
position:relative;
}
#menu ul li:hover > a {
color:#fff;
border-color:#8a9;
background-color: #8a9;
}

#menu ul :hover ul {left:-5px; width:122px; top:31px;}

#menu ul :hover ul :hover ul,
#menu ul :hover ul :hover ul :hover ul,
#menu ul :hover ul :hover ul :hover ul :hover ul {left:122px; width:122px; top:-5px;}

#menu ul :hover ul ul,
#menu ul :hover ul :hover ul ul,
#menu ul :hover ul :hover ul :hover ul ul {left:-9999px;}

</style>Here is the code:

<div id="menu">

<ul class="level1">
<li><a href="#url">Home</a></li>

<li><a href="../bedandbreakfast/bedandbreakfast.htm">Bed and Breakfast</a></li>

<li><a class="fly" href="#url">Cottages<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="../cottages/bothy.htm">Bothy</a></li>
<li><a href="../cottages/schoolhouse.htm">Schoolhouse</a></li>
<li><a href="../cottages/cottage.htm">Cottage</a></li>
<li><a href="../cottages/house.htm">House</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Booking<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Beginners Slopes</a></li>

<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>

<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>

<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">From Airport</a></li>

<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>

<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>

<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Short Breaks</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>

<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Contact us</a></li>

</ul>
</div>Many thanks