Menu Positioning

CSS stylesheet for example

CSS Code

...
div.menu {
  width: 20%;
  float: left;
  margin: 0;
}

h2.navbar {
  visibility: hidden;
  font-size: xx-small;
  border: none;
  margin: 0;
  padding: 0;
}

ul.navbar {
  margin: 0;
  margin-right: 1em;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
  font-size: 12px;
}

li.navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
  font-size: 12px;
}

a.navbar {
  padding-left: 1em;
  padding-right: .25em;
  padding-top: .25em;
  padding-bottom: .25em;
  text-decoration: none;
  display: block;
  width: 100%;
}

a.navbar_selected {
  padding-left: 1em;
  padding-right: .25em;
  padding-top: .25em;
  padding-bottom: .25em;
  text-decoration: none;
  display: block;
  width: 100%;
}

a.navbar:link{
  color: #000000;
}

a.navbar:visited{
  color: #000000;
}

a.navbar:hover{
  color: white;
  background: #CC3300;
  text-decoration: underline;
}

a.navbar:active{
  color: white;
  background: #CC3300;
  text-decoration: underline;
}

a.navbar_selected:link {
  color: white;
  background: #CC3300;
}

a.navbar_selected:visited {
  color: white;
  background: #CC3300;
}

a.navbar_selected:hover;
  text-decoration: underline;
}

a.navbar_selected:active;
  text-decoration: underline;
}
...

HTML Code

...
<div class="menu">

  <h2 class="navbar">Main Menu</h2>

  <ul class="navbar">

    <li class="navbar"><a class="navbar_selected" href="schedule.htm">Schedule</a></li>
    <li class="navbar"><a class="navbar" href="presenters.htm">Presenters</a></li>
    <li class="navbar"><a class="navbar" href="resources.htm">Resources</a></li>

  </ul>

</div>
...