Горизонтальное меню с подменю (CSS + Javascript)

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальное меню с подменю (CSS + Javascript)</title>
<style type="text/css">
ul#hmenu {margin: 0;border: 0 none;padding: 0;  list-style: none;background: #FFF;  height: 28px;font: bold 12px/28px Verdana, Arial;}
ul#hmenu li {margin: 0;border: 0 none;padding: 0;float: left;display: inline;list-style: none;position: relative;height: 28px;}
ul#hmenu ul {margin: 0;border: 0 none;padding: 0;width: 160px;list-style: none;display: none;position: absolute;top: 28px;left: 0;}
ul#hmenu ul:after {clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
ul#hmenu ul li {width: 160px;float: left;display: block !important;display: inline;}
/* Main Menu */
ul#hmenu a {border: 0px;padding: 0 6px;float: none !important;float: left;display: block;background: #FFF;color: #000;font: bold 12px/28px Verdana, Arial;text-decoration: none;height: auto !important;height: 1%;
border: 2px solid #CCC; border-radius: 4px 4px;margin-left:4px;}
/* Main Menu Hover */
ul#hmenu a:hover,ul#hmenu li:hover a,ul#hmenu li.iehover a {background: #808298;color: #FFFFFF;}
/* Second Menu */
ul#hmenu li:hover li a,ul#hmenu li.iehover li a {border-top: 1px solid #FFFFFF;float: none;background: #CCC;color: #000;}
/* Second Menu Hover */
ul#hmenu li:hover li a:hover,ul#hmenu li:hover li:hover a,ul#hmenu li.iehover li a:hover,ul#hmenu li.iehover li.iehover a {border-top: 1px solid #000;background: #CCC;color: #000;}
ul#hmenu ul ul {display: none;position: absolute;top: 0;left: 160px;}
ul#hmenu li:hover ul ul,ul#hmenu li.iehover ul ul {display: none;}
ul#hmenu li:hover ul,ul#hmenu ul li:hover ul,ul#hmenu li.iehover ul,ul#hmenu ul li.iehover ul {display: block;}
</style>
<script  type="text/javascript">
function hmenuhover()
{if(!document.getElementById("hmenu"))
return;var lis=document.getElementById("hmenu").getElementsByTagName("LI");for(var i=0;i<lis.length;i++)
{lis[i].onmouseover=function(){this.className+=" iehover";}
lis[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" iehover\\b"),"");}}}
if(window.attachEvent)
window.attachEvent("onload",hmenuhover);
</script>
</head>
<body>
<object data="html5.svg" type="image/svg+xml"></object> 
<ul id="hmenu" style="width:400px;">
<li><a href="#">Линк 1</a></li>
<li><a href="#">Линк 2</a></li>
<li><a href="#">Линк 3</a>
<ul>
<li><a href="#">Линк 3-1</a></li>
<li><a href="#">Линк 3-2</a></li>
<li><a href="#">Линк 3-3</a></li>
<li><a href="#">Линк 3-4</a></li>
</ul>
</li>
<li><a href="#">Линк 4</a>
<ul>
<li><a href="#">Линк 4-1</a></li>
<li><a href="#">Линк 4-2</a></li>
</ul>
</li>
</ul>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне