<head>
<title>mencoba css</title>
<style>
#nav{
list-style-type:none;
margin:0;
padding: 0;
width: 180px;
background-color:#663300;
float : left;
}
#nav li{
margin : 0;
padding: 0;
float : left;
width:100%;
}
#nav a{
display : block;
color :#fff;
text-decoration:none;
padding : 0 15px;
line-height :2.5;
border-bottom : 1px solid #fff;
cursor:pointer;
}
#nav a:hover{
background:#330000;
}
#nav2{
list-style-type:none;
margin:0;
padding: 0;
background-color:#663300;
float : left;
}
#nav2 li{
margin : 0;
padding: 0;
float : left;
}
#nav2 a{
width:127px;
float:left;
text-align:center;
color :#fff;
text-decoration:none;
line-height :2;
border-right :1px solid #fff;
}
h1{
cursor:pointer;
text-shadow:1px 1px 1px blue;
}
</style>
</head>
<body>
<H1>menu vertical triswan</h1>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Profil</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
</ul>
<br><br><br><br><br><br><br><br>
<H1>menu Horizontal triswan</h1>
<ul id="nav2">
<li><a href="">Home</a></li>
<li><a href="">Profil</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
</ul>
</body>
</html>
0 komentar:
Posting Komentar