Menu Horizontal com CSS

<< Click to Display Table of Contents >>

Navigation:  CSS >

Menu Horizontal com CSS

Previous pageReturn to chapter overviewNext page

Página

 

Ao passar o mouse sobre os itens ficam destacados:

 

menu_css

Código html

 

<html>

<head>

    <link rel="stylesheet" type="text/css"/>

   <style>

       * {

           margin: 0;

           padding: 0;

           list-style: none;

           vertical-align: baseline;

       }

       #main{

         border: 1px solid red;

         float:left;

       }

       #menu-horizontal{

         list-style: none;

       }

       #menu-horizontal li{

         float: left;

         width: 110px;

         text-align: center;

       }

       #menu-horizontal li a{

         background-color: Tan;

         display: block;

         padding: 5px;

         text-decoration: none;

       }

       #menu-horizontal li a:hover {

         background-color: gray;

         color: white;

       }

   </style>

</head>

<body>

<div id="main">

<ul id="menu-horizontal">

 <li><a href="#">Item 1</a></li>

 <li><a href="#">Item 2</a></li>

 <li><a href="#">Item 3</a></li>

 <li><a href="#">Item 4</a></li>

</ul>

</div>

</body>

</html>