Information
This is the menu I used on my 'horizontal' style layout, see my archives.
I am reproducing it here as a demonstration of an image map for navigation.
Cascading Style Sheet
#info ul {
margin:0 auto;
padding:0;
position:relative;
width:400px;
height:400px;
background:#fff url(insect/hex_nav.gif);
z-index:1;
overflow:hidden;
}
#info li {
list-style-type:none;
width:104px;
height:112px;
position:absolute;
}
#info a {
display:block;
width:104px;
height:0;
color:#000;
text-decoration:none;
padding-top:112px;
background:transparent;
overflow:hidden;
z-index:10;
}
* html #info a {
height:112px;
he\ight:0;
}
#info a#demos {
position:absolute;
left:54px;
top:71px;
background:url(insect/demos.gif) no-repeat -112px 0;
}
#info a#menus {
position:absolute;
left:158px;
top:71px;
background:url(insect/menus.gif) no-repeat -112px 0;
}
#info a#boxes {
position:absolute;
left:2px;
top:156px;
background:url(insect/boxes.gif) no-repeat -112px 0;
}
#info a#opacity {
position:absolute;
left:106px;
top:156px;
background:url(insect/opacity.gif) no-repeat -112px 0;
}
#info a#layouts {
position:absolute;
left:210px;
top:156px;
background:url(insect/layouts.gif) no-repeat -112px 0;
}
#info a#explorer {
position:absolute;
left:54px;
top:241px;
background:url(insect/explorer.gif) no-repeat -112px 0;
}
#info a#mozilla {
position:absolute;
left:158px;
top:241px;
background:url(insect/mozilla.gif) no-repeat -112px 0;
}
#info a#demos:hover,
#info a#menus:hover,
#info a#boxes:hover,
#info a#opacity:hover,
#info a#layouts:hover,
#info a#explorer:hover,
#info a#mozilla:hover {
background-position: 0 0;
}
#info a#demos:hover b,
#info a#menus:hover b,
#info a#boxes:hover b,
#info a#opacity:hover b,
#info a#layouts:hover b,
#info a#explorer:hover b,
#info a#mozilla:hover b {
display:none;
}
xhtml
<ul>
<li>
<a id="demos" href="index.html">
<b>demos</b>
</a>
</li>
<li>
<a id="menus" href="../menus/index.html">
<b>menus</b>
</a>
</li>
<li>
<a id="layouts" href="../layouts/index.html">
<b>layouts</b>
</a>
</li>
<li>
<a id="boxes" href="../boxes/index.html">
<b>boxes</b>
</a>
</li>
<li>
<a id="mozilla" href="../mozilla/index.html">
<b>mozilla</b>
</a>
</li>
<li>
<a id="explorer" href="../ie/index.html">
<b>explorer</b>
</a>
</li>
<li>
<a id="opacity" href="../opacity/index.html">
<b>opacity</b>
</a>
</li>
</ul>
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- pay as you go e-commerce
Build your own SEO friendly webshop - SEO Company
SEO company based in Manchester - VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo - web hosting, dedicated servers
web reseller, managed servers - Web design in Dorset
Bournmouth based web design agency - SEO
First Rate - Australian SEO Company
"The 
web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
