Выпадающее двухуровневое меню
HTML-верх
Код:
#pun-navlinks{display: block;position: relative;z-index: 9999;}
#pun-navlinks ul li {margin: 0px 5px 0px 0px;float: left;display: inline;list-style: none;position: relative;height: 24px;}
#pun-navlinks ul ul {padding: 0px 0px 12px 0px;width: 175px;list-style: none;display: none;position: absolute;top: 24px;left: -5px;border: 1px solid #E8E8E8;
background-color: #4A708B;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;}
#pun-navlinks ul ul li {width: 156px;float: left;display: block !important;text-align:left;padding-left: 6px;}
/* 2nd Menu */
#pun-navlinks ul li:hover li a, #pun-navlinks ul li.iehover li a {float: none;color: #E8E8E8;font-weight:bold;}
#pun-navlinks ul ul ul li:first-child a:after {content: '';position: absolute;left: -6px;top: 50%;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #444;}
/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a, #pun-navlinks ul li.iehover li a:hover, #pun-navlinks ul li.iehover li.iehover a {color: #E8E8E8;text-decoration:none;font-weight:bold;text-shadow: 0 1px 0 #000;}
#pun-navlinks ul ul li:hover {background-color: #8B8B83;}
/* Do Not Move - Must Come Before display:block for Gecko */
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 175px;}
#pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: block;}