Core CSS

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

 
 

© 2007–2022 XoaX.net LLC. All rights reserved.