CSS - Вертикално меню
CSS код:
#menu {
background-color:#333333;
border:1px solid #ffffff;
height:124px;
width:79px;
padding-top:8px;
padding-left:3px;
}
#menu a {
border:1px solid #ffffff;
padding:5px;
background-color:#666666;
color:#FFFFFF;
text-decoration:none;
font-size:11px;
}
#menu a:hover {
color: #ff6600;
background-color:#333333;
border:1px solid #FFCC00;
border-right:1px solid #000000;
}


HTML код:

<div id="menu">
<div style="text-align:right; padding-right:0px;">
<a href="#">Link1</a><br /><br />
<a href="#">Link2</a><br /><br />
<a href="#">Link3</a><br /><br />
<a href="#">Link4</a><br /><br />
</div>
</div>


Целия код:

<html>
<head>
<title>CSS Vertical Navigation Menu ®Web-Tourist.net®</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
#menu {
background-color:#333333;
border:1px solid #ffffff;
height:124px;
width:79px;
padding-top:8px;
padding-left:3px;
}
#menu a {
border:1px solid #ffffff;
padding:5px;
background-color:#666666;
color:#FFFFFF;
text-decoration:none;
font-size:11px;
}
#menu a:hover {
color: #ff6600;
background-color:#333333;
border:1px solid #FFCC00;
border-right:1px solid #ffffff;
}
</style>
</head>

<body>
<div id="menu">
<div style="text-align:right; padding-right:0px;">
<a href="#">Link1</a><br /><br />
<a href="#">Link2</a><br /><br />
<a href="#">Link3</a><br /><br />
<a href="#">Link4</a><br /><br />
</div>
</div>
</body>
</html>


ДЕМО

/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:21 22-07-2011
Полезен урок.
От: paco1
17:42 27-08-2011
Това не е меню, а най елементарни линкове!
1