CSS Horizontal List

Example 1: Horizontal Menu using HTML and CSS.

<style>
    #menu{
       background-color:black;
       padding:15px;
       border-radius:10px;
    }
    #menu li{
       display:inline;
       padding:0 2px;
    }
    #menu li a{
       text-decoration:none;
       color:white;
       padding:10px 20px;
       border-radius:10px 10px 0 0;
    }
    #menu li a:hover{
       background-color:orange;
    }
</style>
<body>
	<h2>Horizontal List</h2>
	<ul id="menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</body>

Example 2: Horizontal Menu using HTML and CSS.

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        float: left;
    }
    a:link, a:visited {
        display: block;
        width: 120px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        text-align: center;
        padding: 10px;
        text-decoration: none;
        text-transform: uppercase;
    }
    a:hover, a:active {
        background-color: #7A991A;
    }
</style>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>

Ad: