CSS - Best Practices: Dropdown Menus

*{margin:0; padding:0; border:0}

/********** LAYOUT - HEADER **********/
#header {background: #ffffff;
         margin-top:    10px;
         margin-bottom: 25px;
         padding: 0 0 8px;}

img.headerimg {margin-left: 25px;}
	
  /** NAV - top horizontal nav **/
  #nav,
  #nav ul
    {padding: 0;
     margin: 0;
     list-style: none}

  #nav {height:1.5em;
        font: 80% arial;
        margin-top: 1em;
        margin-left: 75px;}

  #nav li {position:relative;
           float: left;
           width: auto;
           display:block;
           margin: 0;
           padding:0}

  #nav a
    {display: block;
     padding: 3px 10px 2px;
     border-bottom: 1px solid rgb(98,61,15);
     border-top: 1px solid rgb(98,61,15);}

  /************* 2nd tier *************/
  #nav li ul {width: 15em;
              position: absolute;
              left: -999em;
              background: #ffffff}

  #nav li:hover ul,
  #nav li.sfhover ul
    {left: 10px;
     z-index:55555}

  #nav li li {background:#9BCD9B;
              float:none;
              border: 1px solid rgb(98,61,15);
              border-top: none;
              padding-left: 0}

  #nav li li a,
  #nav li li a:link,
  #nav li li a:visited,
  #nav li li a:hover
    {color:#000;
     padding: 3px 10px;
     border-bottom: none;
     border-top: none;}

  #nav li li a:hover {color: #000;
                      background: #FFDAB9;}

  #nav li.active {background: #FFDAB9;}
  #nav li.active a {color: #000000}

  /************* 3rd tier *************/
  #nav li ul ul {width: 30em;
                 font-size: 100%;
                 margin-left: 7em;
                 margin-top: -.7em}

  #nav li:hover ul ul,
  #nav li.sfhover ul ul
     {left: -999em;}

  #nav li li:hover ul,
  #nav li li.sfhover ul
     {left: auto;}

  #nav li li li
             {background: #f6f6f6;
              border-top: 1px solid #fff;}

  #nav li li li a,
  #nav li li li a:link,
  #nav li li li a:visited,
  #nav li li li a:hover
    {color: #006400}

  /************* 4th tier *************/
  #nav li ul ul ul{width: 30em;}

  #nav li:hover ul ul ul,
  #nav li.sfhover ul ul ul
     {left: -999em;}

  #nav li li li:hover ul,
  #nav li li li.sfhover ul
     {left: auto;}

  #nav li li li li {background: #FFDAB9;}

  #nav li li li li a:hover {color: #000;
                            background: #9BCD9B;}

#menu ul li > ul { 
  display: 	none; 		
  position: 	absolute; 
  top: 		18px; 		
  left:          0;		
  width:       170px;		
}

#menu ul li:hover > ul {
  display: 	block;
}

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a>
    <li>Details On...
      <ul>
        <li class="small"><a href="blah.php">Registering</a>
      </ul>
  </ul>
  </div>

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a></li>
    <li>Details On...</li>
    <li>
      <ul>
        <li class="small"><a href="blah.php">Registering</a></li>
      </ul>
    </li>
  </ul>
  </div>

table.topnav
{position: relative; 
top: 0;
left: 0;
padding-left: 2px;
}

table.menu
{position: absolute;
bottom: 0; 
z-index: -1;
}

.pad{padding-top: 2px;}

.banner{z-index: 1;
position: relative;}

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script> 

<div id="nav_wrapper">
<div id="nav_bar">
<div id="nav_content">
	<ul id="nav_ul">
	<li><a href="/">Home</a></li>
		<li><a href="/forum/">Forum</a>
			<div class="nav_subcontent">
			<ul>
			<li><a href="/forum/search.php">Search</a></li>
			<li><a href="/forum/memberlist.php">Members</a></li>
			</ul>
			</div>
		</li>
	<li><a href="#">A link without a menu</a></li>
	</ul>
</div>
</div>
</div>

/* Wrapper */
#nav_wrapper {
	clear: both;
	}
/* Bar */
#nav_bar {
	background: url('images/nav_swish_fade.jpg');
	background-repeat: repeat-x;
	height: 36px;
	}
/* All the buttons within the bar, the middle portion */
#nav_content {
	display: inline;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	height: 36px;
	}
	
/* Entire unordered list */
#nav_ul {
	list-style: none;
	position: relative;
	}
/* Top level unordered list */
#nav_content ul>li {
	display: block;
	}
/* Top level unordered list links */
#nav_content ul>li a {
	display: block;
	float: left;
	
	padding: 9px;
	margin-left: 2px;
	margin-right: 2px;
	
	}
/* Menus */
.nav_subcontent {
	display: none;
	position: absolute;
	background: #222;
	
	margin-top: 8px;
	}
/* Menu link */
#nav_content .nav_subcontent a {
	display: block;
	padding: 9px 20px 9px 0;
	margin-left: -5px;
	text-align: left;
	
	min-width: 100px;
	}
	
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
	display: block;
	}

<head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
	width: 1000px;
	height: 600px;
	position:relative;
	left: 150px;
	top: 0px;
} 
.blue_box {
	width: 900px;
	position:absolute;
	top: 5px;
	left: 20px;
	height: 15px;
}
.box2 {
	width: 1050px;
	position:absolute;
	top: 40px;
	left: 20px;
	height: 15px;
	z-index: 2;
}
.main_image {
	position: relative;
	top: 3px;
}
.pic_box {
	width: 738px; /* 10px longer than actual jpg */
	position:absolute;
	top: 75px;
	height: 167px;
	left: 20px;
	z-index; 1;
}
.text_box1 {
	width: 738px;
	position:absolute;
	top: 218px;
	height: 159px;
	left: 26px;
	border-color: #ff0000;
}
.education_box {
	width: 881px;
	position:absolute;
	top: 321px;
	height: 350px;
	left: 21px;
}
.top_news_box {
	width: 136px;
	position:absolute;
	top: 1px;
	height: 317px;
	margin-left: 5px;
	left: 715px;
	border-color: #ff0000;
}

/*Credits: Dynamic Drive CSS Library */
/* Top menu */

.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); 
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}

/* Drop down menu buttons */

.blue ul {  /* For all tags under <ul> (main and sub) */
	padding: 3px 0;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 0;
	font: bold 10pt Verdana;
	list-style-type: none;
	text-align: center; /*set to left, center, or right to align the menu as desired*/
	}
.blue li { /* Sets the properties associated with <li> */
	display: inline; /* Sets li tags horizontal(main and sub) */
	position: relative;
	margin: 0;
	}
.blue li a { /* Sets the properties associated for all anchor tags  */
	text-decoration: none;
	padding: 5px 7px;
	margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
	border: 1px solid #778;
	color: white;
	background: #3282c2;
	border-radius: 8px; /*w3c border radius*/
	box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
	-moz-border-radius: 8px; /* mozilla border radius */
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
	-webkit-border-radius: 8px; /* webkit border radius */
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
	}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
	position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
	left: 1px; 
	display: none; /* Blocks all sub menu tags */
	}	
.blue li:hover ul{ 
	display: block;  /* Shows all elements under each other (as opposed to next to each other) */ 
	}
.blue li:hover ul a {
	position: absolute;
	
	width: 150px;
	top: 5px; /* Amount of space the first sub menu starts from the parent button */
	border-radius: 8px;
	text-decoration: none;
	background-color: #0000FF;
	padding: 5px; /* Pads area around text 5x in all 4 directions */
	border: 1px solid #cccccc;
	border-bottom: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #FFFFFF;
	}
</style>
</head>

<body>
<div class="box1">
 <div class="blue_box">
    <div class="menu">
      <ul>
        <li><a href="">Join MSSNY</a></li>
        <li><a href="">Pay Dues On Line</a></li>
        <li><a href="">Directory Questionaire</a></li>
        <li><a href="">MSSNYPAC</a></li>
        <li><a href="">Grassroots Action Center</a></li>
        <li><a href="">Member Login</a></li>
      </ul>
    </div><!-- Close menu -->
  </div><!-- Close box2 -->
 
  <div class="box2">
    <div class="blue">
      <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About MSSNY</a> 
      <ul> 
        <li><a href="#">Divisions</a></li> 
        <li><a href="#">Governance</a></li> 
        <li><a href="#">Committees</a></li> 
		<li><a href="#">Member Sections</a></li> 
        <li><a href="#">House of Delegates</a></li> 
		<li><a href="#">Position Statements</a></li> 
		<li><a href="#">By Laws</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Membership</a> 
      <ul> 
        <li><a href="#">Applications</a></li> 
        <li><a href="#">Pay Dues Online</a></li> 
        <li><a href="#">AAPI Physicians</a></li> 
        <li><a href="#">NYS Medical Directory</a></li> 
      </ul> 
    </li>
    <li><a href="#">Medical Community</a> 
      <ul> 
        <li><a href="#">County Societies</a></li> 
        <li><a href="#">Speciality Societies</a></li> 
        <li><a href="#">State Societies</a></li> 
        <li><a href="#">Ethnic Medical Associations</a></li> 
		<li><a href="#">American Medical Association</a></li> 
        <li><a href="#">NYS Department of Health</a></li> 
        <li><a href="#">Additional Medical Links</a></li> 
      </ul> 
    </li> 
	<li><a href="#">Public Health</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
    </li> 
	<li><a href="#">Physician Advocacy</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
	  <li><a href="#">Practice Resources</a> 
      <ul> 
        <li><a href="#">WCB Guidelines and Fee Schedule</a></li> 
        <li><a href="#">EHR Implementation Services</a></li> 
        <li><a href="#">CME Physicial Education</a></li> 
        <li><a href="#">MSSNY Online Library</a></li> 
      </ul> 
    </li> 
  </ul>
    </div>
    <!-- Close blue -->
  </div>
  <!-- Close blue_box -->
 
  <div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
      <!-- Close top_news_Box -->
      <div class="top_news_box">
        <p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
        <p>Visit the MSSNY Blog Forum. .</p>
        <p>News of New York<br />
        Rate Card and Classifieds </p>
        <p> MSSNY eNews 6/17/11 </p>
        <p>MSSNY Legal Resources </p>
        <p> *** Members Section *** <br />
        Members: Click Here</p>
        <p> Non Members: <br />
        Browse Our Benefits Join US </p>
        <p> <br />
        </p>
    </div>
  </div>
  <!-- Close pic_box -->
  <div class="text_box1">To All New York Physicians: No Tort Reform &nbsp;&nbsp;&nbsp; HOD
    Ref. Comm. Documents &nbsp;&nbsp;&nbsp; Health Care Reform <br />
        <br />
    WCB Guidelines and Fee Schedule    6-Credit CME Course on New Workers Compensation
    <br />
    Treatment Guidelines&nbsp;&nbsp;&nbsp; <br />
    <br />
    Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
    season <br />
  </div>
  <div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
  <!-- Close pic_box -->
</div>
</body>
</html>