скачать сборник меню для CSS — красивого и готового к работе
Вот мы и дошли до выпадающего меню созданного на CSS. Этот вид меню очень полезен, так как экономиться место на сайте.
Некоторые веб – мастера думают, что такой тип меню поисковые пауки не видят. Хочу вам сказать, это ошибочное мнение, так как меню написано на чистом CSS и без всяких скриптов. На сколько я знаю, поисковые пауки хорошо читают HTML и CSS.
Начнём. Выпадающее горизонтальное меню на CSS.
Посмотрите как CSS — меню выглядит в живую.
— просмотр выпадающее меню (пример)
<html>
<head>
</head>
<link href=»style.css»>
<link href=»style.css» rel=»stylesheet» type=»text/css»>
<body>
<ul id=»cssmenu»>
<li><a href=»#»>Горизонтальное</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
</ul>
</li>
<li><a href=»#»>CSS</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
<li><a href=»#»>Ссылка 3</a></li>
<li><a href=»#»>Ссылка 4</a></li>
<li><a href=»#»>Ссылка 5</a></li>
</ul>
</li>
<li><a href=»#»>Меню</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
В CSS файле пишем.
ul#cssmenu {
width:350px;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #003366;
height: 30px;
font: bold 12px/28px Verdana, Arial;
border-left:#003366 1px solid;
}
ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 30px;
}
ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 170px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}
ul#cssmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 27px;
visibility: hidden;
}
ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
}
/* Main Menu */
ul#cssmenu a {
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
background: #FFFFFF;
color:#003366;
border-top:#003366 1px solid;
}
/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 2px solid #FFFFFF;
float: none;
background: #003366;
color: #FFFFFF;
}
/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 2px solid #FFFFFF;
background: #FFFFFF;
color:#003366;
border:#003366 1px solid;
}
ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 170px;
}
ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}
ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul
{
display: block;
}
По теме:
Выпадающее меню на CSS