head
<STYLE type=text/css>BODY { FONT: 11px verdana } UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none } UL LI { POSITION: relative } LI UL { DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px } UL LI A { BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none } HTML UL LI { FLOAT: left; HEIGHT: 1% } HTML UL LI A { HEIGHT: 1% } UL LI A:hover { BACKGROUND: #f9f9f9; COLOR: red } LI UL LI A { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px } LI:hover UL { DISPLAY: block } LI.over UL { DISPLAY: block } </STYLE> <SCRIPT type=text/javascript> startList = function() {//fantasyflash.ru if (document.all&&document.getElementById) { menusRoot = document.getElementById("menus"); for (i=0; i<menusRoot.childNodes.length; i++) { node = menusRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over";//osw } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList;</SCRIPT>
body
<UL id=menus> <LI><A href="http://color-dream.narod.ru/">1</A></LI> <LI><A href="http://color-dream.narod.ru/">2</A> <UL> <LI><A href="http://color-dream.narod.ru/">3</A></LI> <LI><A href="http://color-dream.narod.ru/">4</A></LI> <LI><A href="http://color-dream.narod.ru/">5</A></LI> </UL></LI> <LI><A href="http://color-dream.narod.ru/">6</A> <UL> <LI><A href="http://color-dream.narod.ru/">7</A></LI> <LI><A href="http://color-dream.narod.ru/">9</A></LI> <LI><A href="http://color-dream.narod.ru/">10</A></LI> <LI><A href="http://fantasyflash.ru">11</A></LI> </UL></LI> </UL>
Используются технологии
uCoz