Stu Nicholls | CSSplay | Horizontal vertical menu

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.