Am creat pentru voi un meniu vertical
Previzualizare
avem aici codul complet
aceste coduri se adauga in widget
Previzualizare
avem aici codul complet
Cod:
<html>
<head>
<title>Meniu de linkuri cu css – tutorial</title>
<style type="text/css">
#meniu {
list-style-type:none;
width: auto;
height:30px;
margin:0px;
padding:0px;
}
#meniu li {
width:180px; height:30px;
border-bottom: 1px solid black;border-top: 1px solid #3E3E3E;
line-height:30px;
text-align:center;
background-color:#000000;
}
#meniu li a:link {
width:180px; height:30px;
display:block;
background: rgb(35,35,35); /* Old browsers */
background:url(http://i32.servimg.com/u/f32/14/12/03/12/hover212.png);
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: white;
text-decoration:none;
}
#meniu li a:visited {
width:180px; height:30px;
display:block;
background-color:#000000;
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: white;
text-decoration:none;
}
#meniu li a:hover {
background: url(http://i32.servimg.com/u/f32/14/12/03/12/cathea10.gif);
width:180px;height:30px;
display:block;
text-align:center;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<ul id="meniu">
<li><a href="#"><img src="http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png"style="margin-left: -25px;"></img>Tutoriale</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/Futurosoft%20Icons%200.5.2/16x16/apps/designer.png"style="margin-left: -25px;"></img>Photoshop</a></li>
<li><a href="#"><img src="http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0640/page_white_code.png"style="margin-left: -25px;"></img>Html</a></li>
<li style="margin-right:0px;"><a href="#"><img src="http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0640/page_white_code_red.png"style="margin-left: -25px;"></img>Tutoriale css</a></li>
</ul>
</body>
</html>aceste coduri se adauga in widget