/* page styling, unimportant for the menu. only makes the page looks nicer */ /* remove all list stylings */ .menupoup, .menupoup ul { margin: 0; padding: 0; border: 0; list-style-type: none; display: block; } .menupoup li { margin: 0; padding: 0; border: 0; display: block; float: left; /* move all main list items into one row, by floating them */ position: relative; /* position each LI, thus creating potential IE.win overlap problem */ z-index: 5; /* thus we need to apply explicit z-index here... */ } .menupoup li:hover { z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */ white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */ } .menupoup li li { float: none;/* items of the nested menus are kept on separate lines */ } .menupoup ul { visibility: hidden; /* initially hide all submenus. */ position: absolute; z-index: 10; left: 0; /* while hidden, always keep them at the top left corner, */ top: 0; /* to avoid scrollbars as much as possible */ } .menupoup li:hover>ul { visibility: visible; /* display submenu them on hover */ top: 100%; /* 1st level go below their parent item */ } .menupoup li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */ top: 0; left: 100%; } /* -- float.clear -- force containment of floated LIs inside of UL */ .menupoup:after, .menupoup ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } .menupoup, .menupoup ul { /* IE7 float clear: */ min-height: 0; } /* -- float.clear.END -- */ /* -- sticky.submenu -- it should not disappear when your mouse moves a bit outside the submenu YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly! if you do it, make sure you 110% know what you do */ .menupoup ul { background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */ padding: 10px 30px 30px 30px; margin: -10px 0 0 -30px; /*background: #f00;*/ /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */ } .menupoup ul ul { padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; } /* -- sticky.submenu.END -- */ /* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */ .menupoup, .menupoup ul li { color: #02834A; background: #ffffff; font-family: Arial Narrow, Helvetica, sans-serif; font-size:14px; } .menupoup li { border-right:1px solid #999999; } .menupoup ul { width: 14em; } .menupoup a { text-decoration: none; color: #02834A; padding: .4em 1em; /*padding: 5px 15px;*/ display: block; position: relative; } .menupoup a:hover, .menupoup li:hover>a { color: #02834A; } .menupoup li li { /* create borders around each item */ border: 1px solid #999999; } .menupoup ul>li + li { /* and remove the top border on all but first item in the list */ border-top: 0; } .menupoup li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */ top: 5px; left: 90%; } /* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu placed here to clarify the terminology I use when referencing submenus in posts */ .menupoup>li:first-child>a, .menupoup li + li + li li:first-child>a { color: #02834A; } /* Fix for IE5/Mac \*//*/ .menupoup a { float: left; } /* End Fix */