ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(/images/ddMenuHeader.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(/images/ddMenuHeader_over.gif)}
ul.menu .sub {background:#d1d1d1 url(/images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}
|
Notes: Three images are defined:
- arrow.gif (which provides indicates that the there are subordinate pages.
- ddMenuHeader.gif (which provides the background around the elements
- ddMenuHeader_over.gif (which replaces this image when the cursor hovers over the link).