Use LI element to create horizontal menu in HTML and CSS

Description

The following code shows how to use LI element to create horizontal menu.

Example


<!--from   www .  ja va2  s . c o m-->
<html>
<head>
<style rel="stylesheet" type="text/css">
#menu {
    width: 1000px;
    float: left;
    margin: 12px 0 1px 0;
    display: block;
    height: 26px;
}

#menu li {
    display: inline;
    padding: 0 19px;
    line-height: 25px;
}

#menu a {
    color: black;
    text-decoration: none;
}

</style>
</head>
<body>
    <div id="header">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About our Hotel</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Photogallery</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </div>

</body>

</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table