Horizontal Menus

By default, lists in HTML display items vertically. However, many times we would prefer to have the items listed horizontally so that we can use the list as a menu. With CSS, we can style lists to do this.

HorizontalMenu.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Hiding HTML Elements Example</title>
    <style type="text/css">
      ul.horiz {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #BBCC90;
      }

      ul.horiz > li {
        float: left;
      }

      ul.horiz > li a {
        display: block;
        color: #AA4422;
        text-align: center;
        padding: 20px;
        text-decoration: none;
      }

      ul.horiz > li a:hover {
        background-color: #CCDDAA;
      }
    </style>
  </head>
  <body>
    <ul class="horiz">
      <li><a href="#beatitudes">Beatitudes</a></li>
      <li><a href="#commandments">Commandments</a></li>
      <li><a href="#saints">Saints</a></li>
      <li><a href="#sacraments">Sacraments</a></li>
      <li><a href="#prayers">Prayers</a></li>
    </ul>
  </body>
</html>

Output

Beatitudes
Commandments
Saints
Sacraments
Prayers