Горизонтальное меню

HTML

CSS

<ul>

<li><a href="#">Первый пункт</a></li>

<li><a href="#">Второй пункт</a></li>

<li><a href="#">Третий пункт</a></li>

<li><a href="#">Четвертый пункт</a></li>

</ul>

ul{

list-style: none;

margin:0;

padding:0;

font-size:14px;

}

ul li{

float: left;

}

ul li a{

padding:4px;

text-decoration:none;

color:#666;

margin-right:10px;

}

ul li:hover a, ul li a:hover{

background:#999;

color:#fff;

}

HTML

CSS

<ul>

<li><a href="#">Первый пункт</a></li>

<li><a href="#">Второй пункт</a></li>

<li><a href="#">Третий пункт</a>

<ul>

<li><a href="#">Первый подпункт</a></li>

<li><a href="#">Второй подпункт</a></li>

<li><a href="#">Третий подпункт</a></li>

</ul>

</li>

<li><a href="#">Четвертый пункт</a></li>

</ul>

ul{

list-style: none;

margin:0;

padding:0;

font-size:14px;

}

ul li{

float: left;

}

ul li a{

padding: 4px;

text-decoration: none;

color: #666;

margin-right: 10px;

}

ul li:hover a, ul li a:hover{

background: #999;

color: #fff;

}

ul li ul{

display:none;

position:absolute;

background:#EFEFEF;

margin-top:3px;

}

ul li:hover ul{

display:block;

}

ul li ul li{

float:none;

margin:0;

padding:0;

margin-top:10px;

}

ul li:hover ul li a, ul ul li a{

color:#333;

background:none;

}

ul li ul li a:hover

{

background: none;

color:#999;

}