Arka plan siyah yazılar beyaz. Mause ile linkin üzerine geldiğinde arka plan rengi kırmızı oluyor ve aşağıya doğru açılan bir menü oluşuyor.
Aşağıdaki kod css ve html kodu ile birlikte verilmiş bir örnek sayfadır.
Kodu olduğu gibi kopyalayıp not defterine yapıştır adını menu.html olarak kaydedip bir kontrol et. Bu sayfanın üzerinde alıştırmalar yaparsın ayrıca.
Şimdi birde sana css için ayrı html için ayrı kodları yazıp gönderiyorum.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
body{
margin:0;
padding:0;
}
ul#menu, ul#menu ul{
padding: 0;
margin: 0;
list-style: none;
}
ul#menu li {
float: left;
position: relative;
width: 100px;
}
ul#menu li ul {
display: none;
position: absolute;
top: 19px;
left: 0;
}
ul#menu li > ul {
top: auto;
left: auto;
}
ul#menu li a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #FFFFFF;
background: #000000;
text-decoration: none;
}
ul#menu li a:hover {
color: #FFFFFF;
background: #FF0000;
}
ul#menu li:hover ul, ul#menu li.over ul {
display: block;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="menu">
<li><a title="laktoz" href="http://laktoz.net/">Home</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 3</a></li>
</ul>
</li>
<li><a title="laktoz" href="http://laktoz.net/">Hayattan</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 3</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 4</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 5</a></li>
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 3</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 4</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 5</a></li>
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 3</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 4</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 5</a></li>
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 3</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 4</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 5</a></li>
</ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 1</a></li>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 3</a></li>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 4</a></li>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 5</a></li>
</ul>
</li>
</ul>
</body></html>