Information
Getting a bit more complicated. Using a top left and top right span 'block' to chamfer the corners giving a tab effect.
See menueight_b for an unordered list version of this menu.
Cascading Style Sheet
#container {
position:relative;
}
#menu {
text-align:center;
position:relative;
height:8em;
}
.box {
position:relative;
float:left;
top:30px;
}
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
background-color:#06a;
color:#fff;
display:block;
width:70px;
height:15px;
padding:5px;
margin:0 1px;
}
#menu a .topleft, #menu a .topright {
position:absolute;
top:0;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
}
#menu a .topleft {
left:0;
border-right:10px solid #06a;
}
#menu a .topright {
left:70px;
border-left:10px solid #06a;
}
#menu a:hover {
background-color:#000;
}
#menu a:hover .topleft {
border-right:10px solid #000;
border-top:10px solid #fff;
}
#menu a:hover .topright {
border-left:10px solid #000;
border-top:10px solid #fff;
}
xhtml
<div id="container">
<div id="menu">
<div class="box">
<a href="#nogo">
Item 1
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 2
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 3
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 4
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 5
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
</div>
</div>
back to example
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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"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