Horizontal List of Links with hover

 in HTML  tagged css / html / menu / mouseover by

Here is some code from w3schools.com that shows you how to use HTML and CSS to create a simple horizontal menu. If you follow the link to the web site you can edit the code live and see the results – very cool.

<html>
<head>

<style>
ul {
    float: left;
    width: 100%;
    padding: 0;
    margin :0;
    list-style-type: none;
}
a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}
a:hover {background-color: #ff3300;}
li {display: inline;}
</style>

</head>
<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
</body>

In the example above, we let the ul element and the a element float to the left. The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.