|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> 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: 150px; }
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: #000; background: #efefef; text-decoration: none; }
ul#menu li a:hover { color: #a00; background: #fff; }
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 href="#">Anasayfa</a></li> <li><a href="#">Haberler</a> <ul> <li><a href="#">Şirket Haberleri </a></li> <li><a href="#">Yurt içi Haberleri </a></li> <li><a href="#">Yurt dışı Haberleri</a></li> </ul> </li> <li><a href="#">Ürünler</a> <ul> <li><a href="#">Ipod</a></li> <li><a href="#">Telefon</a></li> <li><a href="#">Televizyon</a></li> <li><a href="#">Radyo</a></li> <li><a href="#">Çakmak</a></li> </ul> </li> </ul> </body> </html>
|