Information
Following on from the previous menu I have changed the css to produce a horizontal list of vertical items.
As with the previous menu this is just a css styled unordered list that will degrade well for text only browsers.
Cascading Style Sheet
#vertical {
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, "times new roman", serif;
}
#vertical li {
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#vertical li a {
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#vertical li a em {
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#vertical li a em.nd {
border-bottom:0.1em solid #000;
}
#vertical li a:hover {
background:#eee;
}
#vertical li a:hover em {
background:#eee;
color:#800;
}
xhtml
<ul id="vertical">
<li>
<a href="../menu/index.html">
<em>D</em><em>E</em><em>M</em>
<em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../menus/index.html">
<em>M</em><em>E</em><em>N</em>
<em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../layouts/index.html">
<em>L</em><em>A</em><em>Y</em><em>O</em>
<em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../boxes/index.html">
<em>B</em><em>O</em><em>X</em>
<em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../mozilla/index.html">
<em>M</em><em>O</em><em>Z</em><em>I</em>
<em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="../ie/index.html">
<em>E</em><em>X</em><em>P</em><em>L</em>
<em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="../opacity/index.html">
<em>O</em><em>P</em><em>A</em><em>C</em>
<em>I</em><em>T</em><em class="nd">Y</em>
</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.
- 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