25 октября 2009
Нет комментариев
html:
<ul id='hornav'> <li><a href='#null'>Меню 1</a></li> <li><a href='#null'>Меню 2</a> <ul> <li><a href='#null' target='_blank'>Меню 2.1</a></li> <li><a href='#null' target='_blank'>Меню 2.2</a></li> </ul> </li> <li><a href='#null'>Меню 3</a> <ul> <li><a href='#null'>Меню 3.1</a> <ul> <li><a href='#null'>Меню 3.1.1</a></li> <li><a href='#null'>Меню 3.1.2</a></li> <li><a href='#null'>Меню 3.1.3</a></li> </ul> </li> <li><a href='#null'>Меню 3.2</a> <ul> <li><a href='#null'>Меню 3.2.1</a></li> <li><a href='#null'>Меню 3.2.2</a></li> <li><a href='#null'>Меню 3.2.3</a></li> </ul> </li> <li><a href='#null'>Меню 3.3</a> <ul> <li><a href='#null'>Меню 3.3.1</a></li> <li><a href='#null'>Меню 3.3.2</a></li> <li><a href='#null'>Меню 3.3.3</a></li> </ul> </li> </ul> </li> </ul>
css:
#hornav, #hornav ul { list-style: none; margin: 0; padding: 0; border: 1px solid #000; background: #515151; float: left; width: 100%; } #hornav li { float: left; position: relative; background: #515151; back\ground: none; } #hornav li ul { display: none; position: absolute; padding: 8px 0; width: 138px; } #hornav a { color: #fff; text-decoration: none; display: block; width: 120px; padding: 4px 10px; } #hornav a:hover { color: #fe572a; background: #ccc; } #hornav li:hover, #hornav li.jshover { background: #333; } #hornav li li a { width: 118px; background: none; } #hornav li:hover ul, #hornav li.jshover ul { display: block; } #hornav li:hover li ul, #hornav li.jshover li ul { display: none; width: 138px; top: -9px; left: 113px; } #hornav li:hover li:hover ul, #hornav li.jshover li.jshover ul { display: block; }
javascript:
jsHover = function() { var hEls = document.getElementById('hornav').getElementsByTagName('LI'); for (var i=0, len=hEls.length; i<len; i++) { hEls[i].onmouseover=function() { this.className+=' jshover'; } hEls[i].onmouseout=function() { this.className=this.className.replace(' jshover', ''); } } } if (window.attachEvent && navigator.userAgent.indexOf('Opera')==-1) window.attachEvent('onload', jsHover);
