Еще один образец Меню на "css"
Код html
<!DOCTYPE HTML>
<html>
<head>
<title>Меню</title>
<link href="css/new 2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Меню</a>
<span>
<a href="#">1Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">Меню</a>
<span>
<a href="#">2Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">Меню</a>
<span>
<a href="#">3Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
</ul>
</div>
</body>
</html>
Количество ссылок легко увеличивается добавлением строки в нужный блок.
<a href="#">Ссылка</a>
Код "css'
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu {
width: 158px;
margin: 10px;
}
#menu li a {
height: 27px;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background:url(http://vcs.name/script/menu/img/57.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #FFF;
background: url(http://vcs.name/script/menu/img/58.gif) 0 -32px;
padding: 8px 0 0 35px;
}
#menu li span {
position: absolute;
left: 10em;
margin-top: -1.4em;
width: 10em;
display: none;
}
#menu li:hover span { display: block;}
#menu li span a { display: table-header-group; }
|