Horizontal Menu

Hi,

I can't get my horizontal menu to work correctly and I don't know how to fix it.

Please help me!


This is what I have

CSS code

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 11px Verdana;
	color: #333333;
	background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
	/* color: #ff0000; */
}
img {
	border: 0;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.aligncenter {
	text-align: center;
}
.hidden {
	display: none;
}

/** BEGIN wrapper **/
#wrapper {
	width: 100%;
	margin: auto auto;
	text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
	overflow: hidden;
}
	#header .pages {
		list-style-type: none;
		height: 20px;
		padding-top: 7px;
		background: url(../images/bgcolorHeaderup.jpg);
		/* background-color: #6d90b0; */

	}
		#header .pages li {
			float: left;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#header .pages li a {
			display: block;
			text-decoration: none;
			color: #a51d43;
			font-weight: bold;
			display: block;
			padding: 0px; 12px;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
		}
		#header .pages li a:hover {
			 border-color: #ffffff; 
		}
	#header .logo {
		float: left;
		clear: both;
		height: 70px;
	}
		#header .logo h1 {
			text-transform: uppercase;
			font-size: 2.5em;
			padding-top: 3px;
		}
			#header .logo h1 a {
				text-decoration: none;
			}
		#header .logo p {
			font-weight: bold;
			text-transform: uppercase;
			color: #888888;
		}
	#header .Welcome {
		float: right;
		margin-right:15px;
		margin-top:10px;
	}
	#header .categories {
		list-style-type: none;
		height: 30px;
		margin-left: -15px;
		background: #EEEEEE url(../images/background.gif) repeat-x 0 0;
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			
		}
		#header .categories li a:hover {
			/*border-color: #ffffff; */
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		
		.topHeader {
			
			border:solid; 
			border:1px;
			border-top:#cccbcb; 
			border-bottom:#cccbcb; 
			width:100%; 
			background: url(../images/bgcolorHeader.jpg);
		}
		
		.HeaderTitle 
		{
		float:left;
		width:300px;
		margin-left:200px;
		margin-top:15px;
			
		}
		
		
/** END header **/

/** BEGIN sidebars **/
.box {
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	padding: 6px;
	margin-bottom: 10px;
}
	.box h2 {
		background-color: #b8b8b9; 
		/* 9c9d9f */
		color: #ffffff;
		font-size: 1em;
		text-transform: uppercase;
		padding: 4px;
	}
	
	.SubDivBox{
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
	}
	
	
#lsidebar {
	width: 200px;
	float: left;
	padding-bottom: 10px;
}
	#lsidebar ul {
		list-style-type: none;
	}
		#lsidebar ul li {
			line-height: 1.4em;
			padding: 4px 0 4px 17px;
			background: url(../images/bullet.gif) no-repeat 2px 9px;
			border-bottom: 1px dotted #B6B6B6;
		}
		#lsidebar ul li a {
			color: #333333;
			text-decoration: none;
		}
		#lsidebar ul li a:hover {
			color: #4A79A5;
			text-decoration: underline;
		}
#rsidebar {
	/* width: 315px; */
	width:15%;
	float: right;
	padding-bottom: 10px;
}
	#rsidebar .ads {
		padding: 0 7px;
		text-align: center;
	}
		#rsidebar .ads img {
			margin: 7px;
		}
	#rsidebar form {
		height: 33px;
		background: url(../images/search.gif) no-repeat center 0;
	}
		#rsidebar form input {
			border: 0;
			/*width: 290px;*/
			width:15%;
			margin: 9px 0 0 5px;
		}
		#rsidebar form button {
			display: none;
		}
	#rsidebar ul {
		list-style-type: none;
		padding: 5px 8px;
	}
		#rsidebar ul li {
			line-height: 1.4em;
			padding: 5px 0;
		}
		#rsidebar ul li a {
			font-weight: bold;
		}
		#rsidebar ul li p {
			padding-top: 5px;
		}
	#rsidebar .flickr {
		text-align: center;
		padding: 0 7px;
	}
		#rsidebar .flickr img {
			margin: 6px;
		}
	#rsidebar .video {
		padding: 2px;
	}
	#rsidebar .tags {
		padding: 2px 6px;
	}
		#rsidebar .tags a {
			
		}
		#rsidebar .tags a:hover {
			
		}
/** END sidebars **/

/** BEGIN content **/
#content { 
	margin-left:200px;
	padding: 0 10px 10px 0px;
	
}
	#featured {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		margin-bottom: 10px;
		padding: 6px;
	}
	#content .featured {
		position: relative;
		padding: 0 6px 12px;
		height: 240px;

	}
		#featured h2 {
			background-color: #d6d7d7; 
			color: #ffffff;
			font-size: 12px;
			text-transform: uppercase;
			padding: 10px;
			margin-bottom: 5px;
			font-weight:bold;
		}
		#content .featured .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 5px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .featured h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		/* #content .featured img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		} */
		#content .featured p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .featured .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .featured .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .featured .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .recent {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		padding: 6px;
		margin-bottom: 10px;
	}
	#content .post {
		position: relative;
		padding: 5px;
		margin-bottom: 10px;
	}
		#content .recent h2 {
			background-color: #4A79A5;
			color: #ffffff;
			font-size: 1em;
			text-transform: uppercase;
			padding: 4px;
			margin-bottom: 5px;
		}
		#content .post .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 10px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .post h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		#content .post img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		}
		#content .post p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .post .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .post .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .post .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .postnav {
		clear: both;
		padding: 10px 0;
	}
		#content .postnav ul {
			list-style-type: none;
			padding: 10px;
		}
			#content .postnav ul li {
				float: left;
				color: #B5B4BC;
				padding: 4px;
			}
			#content .postnav ul li a {
				color: #636363;
				text-decoration: none;
				display: block;
				padding: 2px 6px;
				border: 1px solid #E2E2E2;
			}
			#content .postnav ul li a:hover {
				border-color: #ffffff;
			}
			#wp_page_numbers ul {
				border-top: 0 !important;
			}
			#wp_page_numbers .page_info {
				padding: 3px 6px !important;
				margin-right: 2px;
				border: 1px solid #e0e0e0 !important;
				margin-top: 4px;
			}
			#wp_page_numbers .active_page a {
				background-color: #ffffff !important;
				border: 0 !important;
			}
/** END content **/

/** BEGIN footer **/
#footer {
	clear: both;
	background-color: #4A79A5;
	color: #2E4B54;
	font-size: 0.9em;
	height: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
}
	#footer a {
		color: #ffffff;
	}
	#footer .wrapper {
		width: 960px;
		margin: auto auto;
		text-align: left;
	}
	#footer .l {
		float: left;
	}
	#footer .r {
		float: right;
	}
/** END footer **/

/** BEGIN miscellaneous **/
#content .single {
	padding: 2px;
}
	#content .single p {
		line-height: 1.5em;
		margin-bottom: 10px;
	}
	#content .single ul, #content .single ol {
		list-style-position: inside;
		margin-bottom: 10px;
	}
	#content .single li {
		line-height: 1.5em;
		padding: 2px 0;
	}
	#content .single blockquote {
		padding: 10px 10px 5px;
		margin-bottom: 10px;

		background-color: #eeeeee;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
	}
	#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
		font-size: 1.2em;
		margin-bottom: 5px;
	}
#comments {
	padding: 2px;
}
	#comments a {
		text-decoration: none;
	}
	#comments h2 {
		font-size: 1.6em;
		margin: 10px 0;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.6em;
	}
	#comments form {
		
	}
	#comments form p {
		margin-bottom: 5px;
	}
		#comments form input {
			margin-right: 5px;
		}
		#comments form input, textarea {
			border: 1px solid #cccccc;
			font-size: 0.9em;
			font-family: Verdana;
			padding: 4px;
			background-position: 4px 4px;
			background-repeat: no-repeat;
		}
		#comments form input {
			width: 240px;
			border: 1px solid #cccccc;
		}
		#comments form textarea {
			width: 350px;
			padding: 4px 4px !important;
			border: 1px solid #cccccc;
		}
		#comments form button {
			border: 1px solid #a0a0a0;
			font-size: 1em;
			font-family: Verdana;
			padding: 2px 6px;
		}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
h2.title {
	font-size: 1em !important;
	text-transform: uppercase;
	padding: 10px;
	color: #565656;
}
.notfound {
	padding: 40px;
}
	.notfound h2 {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 10px;
	}

/** END miscellaneous **/


#comments ol {
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0;
}
	#comments .buffer {
		padding: 10px;
	}
	#comments ol li {
		margin-bottom: 10px;
	}
	#comments ol li ul li {
		border: 1px solid #e0e0e0;
		padding: 10px;
	}
	#comments ol li .avatar {
		float: right;
	}
	#comments ol li .comment-author {
		
	}
		#comments ol li .comment-author .fn {
			font-weight: bold;
			font-size: 1.2em;
		}
	#comments ol li .comment-meta {
		font-size: 0.9em;
		color: #999999;
		margin: 5px 0 10px;
	}
	#comments ol li .reply {
		font-size: 0.9em;
		font-weight: bold;
		padding-bottom: 10px;
	}
	#comments .children {
		list-style-type: none;
	}
#comments .navigation {
	padding: 0 0 40px;
	font-size: 0.9em;
}
	#comments .navigation a {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #cccccc;
	}
	#comments .navigation a:hover {
		color: #000000;
		border-color: #000000;
		text-decoration: none;
	}
#comments .says {
	display: none;
}

.footerfont {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8pt;
	text-align:center;
	color:#eaeaea; 
	text-decoration:none;
	font-weight:bold;
    cursor:pointer;
}

.hdr {
    font-size: 13px;
    padding: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #eaeaea;
    border: solid 1px #dddddd;
	color:#4a79a5;
	font-weight:bold;
}


.leftcolbox {
    background-color: #fcfcfc;
    border: solid 1px #dddddd;
    padding: 10px;
    color: #555555;
    line-height: 1.3em;
}

.msgcnttitle {
    background-color: #f4f9f9;
    max-height: 35px;
    font-size: 13px;
    margin: auto;
	padding: 10px;
	color:#7a7a7b;
	font-weight:bold;
	border: solid 1px #dddddd;
}




.ErrorStyle { 
	color: #FFF; 
	display: inline-block; 
	padding: 1px 2px; 
	font-weight:bold;
	color:#F00;
} 



/* beginning Navigation Style*/

#nav ul li a {
    color:#FFF;
    }

#nav ul li.active {
 	background-color:#a51d43;
    }

/* end Navigation Style*/



.LeftMenuLine{
border-bottom-style:dotted; 
border-bottom-width:1px; 
border-bottom-color:#dddddd;	
}


/* beginning Upload*/

input.fileStyle {
position: relative;
   font-family: calibri;
   padding: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #f1f2f2;
   cursor:pointer;
   width:500px;
   color:#3d6183;
   font-weight:bold;

}


/* end Upload 


a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
}*/

.leftcolbox a:hover
{
	text-decoration:underline;
	color: #000;
	
}

.leftcolbox a
{
	text-decoration: none;
	color: #a51d43;
}

hr
{
 	color:#4a79a5;	
	
}

.ListGridHeader 
{
	/*background-color:#b8b8b9;*/
	height:20px;
	color:#fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.RotateRow
{
	color:#4a79a5;
}

.paggingRcd
{
	cursor:pointer;
	color:#a51d43;
	text-decoration: none;
}

.paggingRcd:hover 
{
	text-decoration: underline;
	color:#000000;
}

.Redcolor
{
	color:#b72035;	
}

/*  Begin Menu Navigation */




/* End Menu Navigation */

Open in new window



My HTML code

<!-- BEGIN header -->
  <div id="header">
    <!-- begin pages -->
    <ul class="pages">
      <li class="f"><a href="index.html">Business Configuration Unit
      1-800-555-5555</a></li>
      
            <li class="f" style="text-align:right;float:right;margin-right:30px;font-weight:bold;"><span style="color:#888888;">Welcome <cfoutput>#GetSomeUsers.givenName#</cfoutput></span></li>
    </ul>

    
    <!-- end pages -->
    <!-- begin logo and header -->
  <div class="topHeader">
    <div class="logo" id="sub-header"><img src="images/Logo.jpg"  /></div>
   
    <div class="HeaderTitle"><p style="color:#4a79a5; text-transform::uppercase; font-size:24px; font-weight:bold;"> BLAZE UNIT TESTING </p></div>
</div>

    <!-- end logo and header -->
    <!-- begin categories -->
  <menu id="nav">  
    <ul class="categories" style="font-size:12px;">
		<li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;font-weight:bold;">Home</a></li>
        <li><a href="AddRule.cfm" class="AddRule" target="_self" style="font-weight:bold;">Add New Testing Rule</a></li>
 		<li><a href="#" class="Report" style="font-weight:bold;">Report</a>
 		<ul>
 			<li><a href="#">Report 1</a></li>
 			<li><a href="#">Report 2</a></li>
 			<li><a href="#">Report 3</a></li>
 		</ul>
 		</li>
        <li><a href="#" class="Contact" style="font-weight:bold;">Contact Us</a></li>
 	</ul>
  </menu>  

    <!-- end categories -->
  </div>
  <!-- END header -->
  

Open in new window



Thanks,
Lulu
lulu50Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Try adding these definitions. It should get you closer to what you want.
#header .categories li > ul {
			display: none;
			list-style: none
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}

Open in new window

0
lulu50Author Commented:
I can't get it to work
0
Tom BeckCommented:
It tested fine in Firefox. Can you post the css again? It's possible you did not add the new definitions far enough down in the css to override what you have already.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lulu50Author Commented:
I'm using IE

I have not changed anything with HTML

this is what I added in the CSS

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 11px Verdana;
	color: #333333;
	background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
	/* color: #ff0000; */
}
img {
	border: 0;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.aligncenter {
	text-align: center;
}
.hidden {
	display: none;
}

/** BEGIN wrapper **/
#wrapper {
	width: 100%;
	margin: auto auto;
	text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
	overflow: hidden;
}
	#header .pages {
		list-style-type: none;
		height: 20px;
		padding-top: 7px;
		background: url(../images/bgcolorHeaderup.jpg);
		/* background-color: #6d90b0; */

	}
		#header .pages li {
			float: left;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#header .pages li a {
			display: block;
			text-decoration: none;
			color: #a51d43;
			font-weight: bold;
			display: block;
			padding: 0px; 12px;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
		}
		#header .pages li a:hover {
			 border-color: #ffffff; 
		}
	#header .logo {
		float: left;
		clear: both;
		height: 70px;
	}
		#header .logo h1 {
			text-transform: uppercase;
			font-size: 2.5em;
			padding-top: 3px;
		}
			#header .logo h1 a {
				text-decoration: none;
			}
		#header .logo p {
			font-weight: bold;
			text-transform: uppercase;
			color: #888888;
		}
	#header .Welcome {
		float: right;
		margin-right:15px;
		margin-top:10px;
	}
	#header .categories {
		list-style-type: none;
		height: 30px;
		margin-left: -15px;
		background: #EEEEEE url(../images/background.gif) repeat-x 0 0;
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			
		}
		#header .categories li a:hover {
			/*border-color: #ffffff; */
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		
		.topHeader {
			
			border:solid; 
			border:1px;
			border-top:#cccbcb; 
			border-bottom:#cccbcb; 
			width:100%; 
			background: url(../images/bgcolorHeader.jpg);
		}
		
		.HeaderTitle 
		{
		float:left;
		width:300px;
		margin-left:200px;
		margin-top:15px;
			
		}
		
		
/** END header **/

/** BEGIN sidebars **/
.box {
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	padding: 6px;
	margin-bottom: 10px;
}
	.box h2 {
		background-color: #b8b8b9; 
		/* 9c9d9f */
		color: #ffffff;
		font-size: 1em;
		text-transform: uppercase;
		padding: 4px;
	}
	
	.SubDivBox{
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
	}
	
	
#lsidebar {
	width: 200px;
	float: left;
	padding-bottom: 10px;
}
	#lsidebar ul {
		list-style-type: none;
	}
		#lsidebar ul li {
			line-height: 1.4em;
			padding: 4px 0 4px 17px;
			background: url(../images/bullet.gif) no-repeat 2px 9px;
			border-bottom: 1px dotted #B6B6B6;
		}
		#lsidebar ul li a {
			color: #333333;
			text-decoration: none;
		}
		#lsidebar ul li a:hover {
			color: #4A79A5;
			text-decoration: underline;
		}
#rsidebar {
	/* width: 315px; */
	width:15%;
	float: right;
	padding-bottom: 10px;
}
	#rsidebar .ads {
		padding: 0 7px;
		text-align: center;
	}
		#rsidebar .ads img {
			margin: 7px;
		}
	#rsidebar form {
		height: 33px;
		background: url(../images/search.gif) no-repeat center 0;
	}
		#rsidebar form input {
			border: 0;
			/*width: 290px;*/
			width:15%;
			margin: 9px 0 0 5px;
		}
		#rsidebar form button {
			display: none;
		}
	#rsidebar ul {
		list-style-type: none;
		padding: 5px 8px;
	}
		#rsidebar ul li {
			line-height: 1.4em;
			padding: 5px 0;
		}
		#rsidebar ul li a {
			font-weight: bold;
		}
		#rsidebar ul li p {
			padding-top: 5px;
		}
	#rsidebar .flickr {
		text-align: center;
		padding: 0 7px;
	}
		#rsidebar .flickr img {
			margin: 6px;
		}
	#rsidebar .video {
		padding: 2px;
	}
	#rsidebar .tags {
		padding: 2px 6px;
	}
		#rsidebar .tags a {
			
		}
		#rsidebar .tags a:hover {
			
		}
/** END sidebars **/

/** BEGIN content **/
#content { 
	margin-left:200px;
	padding: 0 10px 10px 0px;
	
}
	#featured {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		margin-bottom: 10px;
		padding: 6px;
	}
	#content .featured {
		position: relative;
		padding: 0 6px 12px;
		height: 240px;

	}
		#featured h2 {
			background-color: #d6d7d7; 
			color: #ffffff;
			font-size: 12px;
			text-transform: uppercase;
			padding: 10px;
			margin-bottom: 5px;
			font-weight:bold;
		}
		#content .featured .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 5px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .featured h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		/* #content .featured img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		} */
		#content .featured p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .featured .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .featured .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .featured .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .recent {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		padding: 6px;
		margin-bottom: 10px;
	}
	#content .post {
		position: relative;
		padding: 5px;
		margin-bottom: 10px;
	}
		#content .recent h2 {
			background-color: #4A79A5;
			color: #ffffff;
			font-size: 1em;
			text-transform: uppercase;
			padding: 4px;
			margin-bottom: 5px;
		}
		#content .post .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 10px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .post h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		#content .post img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		}
		#content .post p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .post .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .post .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .post .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .postnav {
		clear: both;
		padding: 10px 0;
	}
		#content .postnav ul {
			list-style-type: none;
			padding: 10px;
		}
			#content .postnav ul li {
				float: left;
				color: #B5B4BC;
				padding: 4px;
			}
			#content .postnav ul li a {
				color: #636363;
				text-decoration: none;
				display: block;
				padding: 2px 6px;
				border: 1px solid #E2E2E2;
			}
			#content .postnav ul li a:hover {
				border-color: #ffffff;
			}
			#wp_page_numbers ul {
				border-top: 0 !important;
			}
			#wp_page_numbers .page_info {
				padding: 3px 6px !important;
				margin-right: 2px;
				border: 1px solid #e0e0e0 !important;
				margin-top: 4px;
			}
			#wp_page_numbers .active_page a {
				background-color: #ffffff !important;
				border: 0 !important;
			}
/** END content **/

/** BEGIN footer **/
#footer {
	clear: both;
	background-color: #4A79A5;
	color: #2E4B54;
	font-size: 0.9em;
	height: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
}
	#footer a {
		color: #ffffff;
	}
	#footer .wrapper {
		width: 960px;
		margin: auto auto;
		text-align: left;
	}
	#footer .l {
		float: left;
	}
	#footer .r {
		float: right;
	}
/** END footer **/

/** BEGIN miscellaneous **/
#content .single {
	padding: 2px;
}
	#content .single p {
		line-height: 1.5em;
		margin-bottom: 10px;
	}
	#content .single ul, #content .single ol {
		list-style-position: inside;
		margin-bottom: 10px;
	}
	#content .single li {
		line-height: 1.5em;
		padding: 2px 0;
	}
	#content .single blockquote {
		padding: 10px 10px 5px;
		margin-bottom: 10px;

		background-color: #eeeeee;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
	}
	#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
		font-size: 1.2em;
		margin-bottom: 5px;
	}
#comments {
	padding: 2px;
}
	#comments a {
		text-decoration: none;
	}
	#comments h2 {
		font-size: 1.6em;
		margin: 10px 0;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.6em;
	}
	#comments form {
		
	}
	#comments form p {
		margin-bottom: 5px;
	}
		#comments form input {
			margin-right: 5px;
		}
		#comments form input, textarea {
			border: 1px solid #cccccc;
			font-size: 0.9em;
			font-family: Verdana;
			padding: 4px;
			background-position: 4px 4px;
			background-repeat: no-repeat;
		}
		#comments form input {
			width: 240px;
			border: 1px solid #cccccc;
		}
		#comments form textarea {
			width: 350px;
			padding: 4px 4px !important;
			border: 1px solid #cccccc;
		}
		#comments form button {
			border: 1px solid #a0a0a0;
			font-size: 1em;
			font-family: Verdana;
			padding: 2px 6px;
		}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
h2.title {
	font-size: 1em !important;
	text-transform: uppercase;
	padding: 10px;
	color: #565656;
}
.notfound {
	padding: 40px;
}
	.notfound h2 {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 10px;
	}

/** END miscellaneous **/


#comments ol {
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0;
}
	#comments .buffer {
		padding: 10px;
	}
	#comments ol li {
		margin-bottom: 10px;
	}
	#comments ol li ul li {
		border: 1px solid #e0e0e0;
		padding: 10px;
	}
	#comments ol li .avatar {
		float: right;
	}
	#comments ol li .comment-author {
		
	}
		#comments ol li .comment-author .fn {
			font-weight: bold;
			font-size: 1.2em;
		}
	#comments ol li .comment-meta {
		font-size: 0.9em;
		color: #999999;
		margin: 5px 0 10px;
	}
	#comments ol li .reply {
		font-size: 0.9em;
		font-weight: bold;
		padding-bottom: 10px;
	}
	#comments .children {
		list-style-type: none;
	}
#comments .navigation {
	padding: 0 0 40px;
	font-size: 0.9em;
}
	#comments .navigation a {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #cccccc;
	}
	#comments .navigation a:hover {
		color: #000000;
		border-color: #000000;
		text-decoration: none;
	}
#comments .says {
	display: none;
}

.footerfont {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8pt;
	text-align:center;
	color:#eaeaea; 
	text-decoration:none;
	font-weight:bold;
    cursor:pointer;
}

.hdr {
    font-size: 13px;
    padding: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #eaeaea;
    border: solid 1px #dddddd;
	color:#4a79a5;
	font-weight:bold;
}


.leftcolbox {
    background-color: #fcfcfc;
    border: solid 1px #dddddd;
    padding: 10px;
    color: #555555;
    line-height: 1.3em;
}

.msgcnttitle {
    background-color: #f4f9f9;
    max-height: 35px;
    font-size: 13px;
    margin: auto;
	padding: 10px;
	color:#7a7a7b;
	font-weight:bold;
	border: solid 1px #dddddd;
}




.ErrorStyle { 
	color: #FFF; 
	display: inline-block; 
	padding: 1px 2px; 
	font-weight:bold;
	color:#F00;
} 



/* beginning Navigation Style*/

#nav ul li a {
    color:#FFF;
    }

#nav ul li.active {
 	background-color:#a51d43;
    }

/* end Navigation Style*/



.LeftMenuLine{
border-bottom-style:dotted; 
border-bottom-width:1px; 
border-bottom-color:#dddddd;	
}


/* beginning Upload*/

input.fileStyle {
position: relative;
   font-family: calibri;
   padding: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #f1f2f2;
   cursor:pointer;
   width:500px;
   color:#3d6183;
   font-weight:bold;

}


/* end Upload 


a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
}*/

.leftcolbox a:hover
{
	text-decoration:underline;
	color: #000;
	
}

.leftcolbox a
{
	text-decoration: none;
	color: #a51d43;
}

hr
{
 	color:#4a79a5;	
	
}

.ListGridHeader 
{
	/*background-color:#b8b8b9;*/
	height:20px;
	color:#fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.RotateRow
{
	color:#4a79a5;
}

.paggingRcd
{
	cursor:pointer;
	color:#a51d43;
	text-decoration: none;
}

.paggingRcd:hover 
{
	text-decoration: underline;
	color:#000000;
}

.Redcolor
{
	color:#b72035;	
}

/*  Begin Menu Navigation */

#header .categories li > ul {
			display: none;
			list-style: none
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}


/* End Menu Navigation */

Open in new window

0
lulu50Author Commented:
I see the menu now but it push down the below div when I hover over the menu to see the submenu

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 11px Verdana;
	color: #333333;
	background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
	/* color: #ff0000; */
}
img {
	border: 0;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.aligncenter {
	text-align: center;
}
.hidden {
	display: none;
}

/** BEGIN wrapper **/
#wrapper {
	width: 100%;
	margin: auto auto;
	text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
	overflow: hidden;
}
	#header .pages {
		list-style-type: none;
		height: 20px;
		padding-top: 7px;
		background: url(../images/bgcolorHeaderup.jpg);
		/* background-color: #6d90b0; */

	}
		#header .pages li {
			float: left;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#header .pages li a {
			display: block;
			text-decoration: none;
			color: #a51d43;
			font-weight: bold;
			display: block;
			padding: 0px; 12px;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
		}
		#header .pages li a:hover {
			 border-color: #ffffff; 
		}
	#header .logo {
		float: left;
		clear: both;
		height: 70px;
	}
		#header .logo h1 {
			text-transform: uppercase;
			font-size: 2.5em;
			padding-top: 3px;
		}
			#header .logo h1 a {
				text-decoration: none;
			}
		#header .logo p {
			font-weight: bold;
			text-transform: uppercase;
			color: #888888;
		}
	#header .Welcome {
		float: right;
		margin-right:15px;
		margin-top:10px;
	}
	
	/* #header #nav {
		background-color: #6d90b0; 
	} */
	
	#header .categories {
		list-style-type: none;
		margin-left: -15px;
		/*background: #000000 url(../images/background.gif) repeat-x 0 0; */
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			
		}
		#header .categories li a:hover {
			/*border-color: #ffffff; */
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		
		.topHeader {
			
			border:solid; 
			border:1px;
			border-top:#cccbcb; 
			border-bottom:#cccbcb; 
			width:100%; 
			background: url(../images/bgcolorHeader.jpg);
		}
		
		.HeaderTitle 
		{
		float:left;
		width:300px;
		margin-left:200px;
		margin-top:15px;
			
		}
		
		
/** END header **/

/** BEGIN sidebars **/
.box {
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	padding: 6px;
	margin-bottom: 10px;
}
	.box h2 {
		background-color: #b8b8b9; 
		/* 9c9d9f */
		color: #ffffff;
		font-size: 1em;
		text-transform: uppercase;
		padding: 4px;
	}
	
	.SubDivBox{
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
	}
	
	
#lsidebar {
	width: 200px;
	float: left;
	padding-bottom: 10px;
}
	#lsidebar ul {
		list-style-type: none;
	}
		#lsidebar ul li {
			line-height: 1.4em;
			padding: 4px 0 4px 17px;
			background: url(../images/bullet.gif) no-repeat 2px 9px;
			border-bottom: 1px dotted #B6B6B6;
		}
		#lsidebar ul li a {
			color: #333333;
			text-decoration: none;
		}
		#lsidebar ul li a:hover {
			color: #4A79A5;
			text-decoration: underline;
		}
#rsidebar {
	/* width: 315px; */
	width:15%;
	float: right;
	padding-bottom: 10px;
}
	#rsidebar .ads {
		padding: 0 7px;
		text-align: center;
	}
		#rsidebar .ads img {
			margin: 7px;
		}
	#rsidebar form {
		height: 33px;
		background: url(../images/search.gif) no-repeat center 0;
	}
		#rsidebar form input {
			border: 0;
			/*width: 290px;*/
			width:15%;
			margin: 9px 0 0 5px;
		}
		#rsidebar form button {
			display: none;
		}
	#rsidebar ul {
		list-style-type: none;
		padding: 5px 8px;
	}
		#rsidebar ul li {
			line-height: 1.4em;
			padding: 5px 0;
		}
		#rsidebar ul li a {
			font-weight: bold;
		}
		#rsidebar ul li p {
			padding-top: 5px;
		}
	#rsidebar .flickr {
		text-align: center;
		padding: 0 7px;
	}
		#rsidebar .flickr img {
			margin: 6px;
		}
	#rsidebar .video {
		padding: 2px;
	}
	#rsidebar .tags {
		padding: 2px 6px;
	}
		#rsidebar .tags a {
			
		}
		#rsidebar .tags a:hover {
			
		}
/** END sidebars **/

/** BEGIN content **/
#content { 
	margin-left:200px;
	padding: 0 10px 10px 0px;
	
}
	#featured {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		margin-bottom: 10px;
		padding: 6px;
	}
	#content .featured {
		position: relative;
		padding: 0 6px 12px;
		height: 240px;

	}
		#featured h2 {
			background-color: #d6d7d7; 
			color: #ffffff;
			font-size: 12px;
			text-transform: uppercase;
			padding: 10px;
			margin-bottom: 5px;
			font-weight:bold;
		}
		#content .featured .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 5px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .featured h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		/* #content .featured img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		} */
		#content .featured p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .featured .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .featured .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .featured .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .recent {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		padding: 6px;
		margin-bottom: 10px;
	}
	#content .post {
		position: relative;
		padding: 5px;
		margin-bottom: 10px;
	}
		#content .recent h2 {
			background-color: #4A79A5;
			color: #ffffff;
			font-size: 1em;
			text-transform: uppercase;
			padding: 4px;
			margin-bottom: 5px;
		}
		#content .post .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 10px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .post h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		#content .post img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		}
		#content .post p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .post .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .post .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .post .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .postnav {
		clear: both;
		padding: 10px 0;
	}
		#content .postnav ul {
			list-style-type: none;
			padding: 10px;
		}
			#content .postnav ul li {
				float: left;
				color: #B5B4BC;
				padding: 4px;
			}
			#content .postnav ul li a {
				color: #636363;
				text-decoration: none;
				display: block;
				padding: 2px 6px;
				border: 1px solid #E2E2E2;
			}
			#content .postnav ul li a:hover {
				border-color: #ffffff;
			}
			#wp_page_numbers ul {
				border-top: 0 !important;
			}
			#wp_page_numbers .page_info {
				padding: 3px 6px !important;
				margin-right: 2px;
				border: 1px solid #e0e0e0 !important;
				margin-top: 4px;
			}
			#wp_page_numbers .active_page a {
				background-color: #ffffff !important;
				border: 0 !important;
			}
/** END content **/

/** BEGIN footer **/
#footer {
	clear: both;
	background-color: #4A79A5;
	color: #2E4B54;
	font-size: 0.9em;
	height: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
}
	#footer a {
		color: #ffffff;
	}
	#footer .wrapper {
		width: 960px;
		margin: auto auto;
		text-align: left;
	}
	#footer .l {
		float: left;
	}
	#footer .r {
		float: right;
	}
/** END footer **/

/** BEGIN miscellaneous **/
#content .single {
	padding: 2px;
}
	#content .single p {
		line-height: 1.5em;
		margin-bottom: 10px;
	}
	#content .single ul, #content .single ol {
		list-style-position: inside;
		margin-bottom: 10px;
	}
	#content .single li {
		line-height: 1.5em;
		padding: 2px 0;
	}
	#content .single blockquote {
		padding: 10px 10px 5px;
		margin-bottom: 10px;

		background-color: #eeeeee;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
	}
	#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
		font-size: 1.2em;
		margin-bottom: 5px;
	}
#comments {
	padding: 2px;
}
	#comments a {
		text-decoration: none;
	}
	#comments h2 {
		font-size: 1.6em;
		margin: 10px 0;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.6em;
	}
	#comments form {
		
	}
	#comments form p {
		margin-bottom: 5px;
	}
		#comments form input {
			margin-right: 5px;
		}
		#comments form input, textarea {
			border: 1px solid #cccccc;
			font-size: 0.9em;
			font-family: Verdana;
			padding: 4px;
			background-position: 4px 4px;
			background-repeat: no-repeat;
		}
		#comments form input {
			width: 240px;
			border: 1px solid #cccccc;
		}
		#comments form textarea {
			width: 350px;
			padding: 4px 4px !important;
			border: 1px solid #cccccc;
		}
		#comments form button {
			border: 1px solid #a0a0a0;
			font-size: 1em;
			font-family: Verdana;
			padding: 2px 6px;
		}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
h2.title {
	font-size: 1em !important;
	text-transform: uppercase;
	padding: 10px;
	color: #565656;
}
.notfound {
	padding: 40px;
}
	.notfound h2 {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 10px;
	}

/** END miscellaneous **/


#comments ol {
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0;
}
	#comments .buffer {
		padding: 10px;
	}
	#comments ol li {
		margin-bottom: 10px;
	}
	#comments ol li ul li {
		border: 1px solid #e0e0e0;
		padding: 10px;
	}
	#comments ol li .avatar {
		float: right;
	}
	#comments ol li .comment-author {
		
	}
		#comments ol li .comment-author .fn {
			font-weight: bold;
			font-size: 1.2em;
		}
	#comments ol li .comment-meta {
		font-size: 0.9em;
		color: #999999;
		margin: 5px 0 10px;
	}
	#comments ol li .reply {
		font-size: 0.9em;
		font-weight: bold;
		padding-bottom: 10px;
	}
	#comments .children {
		list-style-type: none;
	}
#comments .navigation {
	padding: 0 0 40px;
	font-size: 0.9em;
}
	#comments .navigation a {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #cccccc;
	}
	#comments .navigation a:hover {
		color: #000000;
		border-color: #000000;
		text-decoration: none;
	}
#comments .says {
	display: none;
}

.footerfont {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8pt;
	text-align:center;
	color:#eaeaea; 
	text-decoration:none;
	font-weight:bold;
    cursor:pointer;
}

.hdr {
    font-size: 13px;
    padding: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #eaeaea;
    border: solid 1px #dddddd;
	color:#4a79a5;
	font-weight:bold;
}


.leftcolbox {
    background-color: #fcfcfc;
    border: solid 1px #dddddd;
    padding: 10px;
    color: #555555;
    line-height: 1.3em;
}

.msgcnttitle {
    background-color: #f4f9f9;
    max-height: 35px;
    font-size: 13px;
    margin: auto;
	padding: 10px;
	color:#7a7a7b;
	font-weight:bold;
	border: solid 1px #dddddd;
}




.ErrorStyle { 
	color: #FFF; 
	display: inline-block; 
	padding: 1px 2px; 
	font-weight:bold;
	color:#F00;
} 



/* beginning Navigation Style*/

#nav ul li a {
    color:#FFF;
    }

#nav ul li.active {
 	background-color:#a51d43;
    }

/* end Navigation Style*/



.LeftMenuLine{
border-bottom-style:dotted; 
border-bottom-width:1px; 
border-bottom-color:#dddddd;	
}


/* beginning Upload*/

input.fileStyle {
position: relative;
   font-family: calibri;
   padding: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #f1f2f2;
   cursor:pointer;
   width:500px;
   color:#3d6183;
   font-weight:bold;

}


/* end Upload 


a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
}*/

.leftcolbox a:hover
{
	text-decoration:underline;
	color: #000;
	
}

.leftcolbox a
{
	text-decoration: none;
	color: #a51d43;
}

hr
{
 	color:#4a79a5;	
	
}

.ListGridHeader 
{
	/*background-color:#b8b8b9;*/
	height:20px;
	color:#fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.RotateRow
{
	color:#4a79a5;
}

.paggingRcd
{
	cursor:pointer;
	color:#a51d43;
	text-decoration: none;
}

.paggingRcd:hover 
{
	text-decoration: underline;
	color:#000000;
}

.Redcolor
{
	color:#b72035;	
}

/*  Begin Menu Navigation */

#header .categories li > ul {
			display: none;
			list-style: none
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}


/* End Menu Navigation */

Open in new window

0
lulu50Author Commented:
How can I have the submenu over lap what's below it ?

right now when I hover over it the div below it goes down.
0
Tom BeckCommented:
Sure. Just add position:relative to the sub menu <ul>. Here's a mock up.
<!doctype html>
<html>
<head>
<style>
* {
	margin: 0; padding: 0;
}
	#header .categories {
		list-style-type: none;
		height: 30px;
		margin-left: -15px;
		background-color: #EEEEEE;
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			
		}
		#header .categories li a:hover {
			/*border-color: #ffffff; */
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		#header .categories li > ul {
			display: none;
			list-style: none;
			position: relative;
			z-index: 1
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}
		

</style>
</head>

<body>
<!-- BEGIN header -->
  <div id="header">
    
    <!-- begin categories -->
  <menu id="nav">  
    <ul class="categories" style="font-size:12px;">
		<li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;font-weight:bold;">Home</a></li>
        <li><a href="AddRule.cfm" class="AddRule" target="_self" style="font-weight:bold;">Add New Testing Rule</a></li>
 		<li><a href="#" class="Report" style="font-weight:bold;">Report</a>
 		<ul>
 			<li><a href="#">Report 1</a></li>
 			<li><a href="#">Report 2</a></li>
 			<li><a href="#">Report 3</a></li>
 		</ul>
 		</li>
        <li><a href="#" class="Contact" style="font-weight:bold;">Contact Us</a></li>
 	</ul>
  </menu> 
   

    <!-- end categories -->
  </div>
  <!-- END header -->
  <div style="width:100%;height:400px;background-color:#def"></div>
</body>

</html>

Open in new window

0
lulu50Author Commented:
Tom,

it's very close but not 100 percent correct yet.

I can see my sub menu but for some reason it's not displaying them correctly.

please take a look at my CSS I made some changes to it.

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 11px Verdana;
	color: #333333;
	background: #EEEEEE url(../images/backgroundtop.gif) repeat-x 0 0;
}
a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
	/* color: #ff0000; */
}
img {
	border: 0;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.aligncenter {
	text-align: center;
}
.hidden {
	display: none;
}

/** BEGIN wrapper **/
#wrapper {
	width: 100%;
	margin: auto auto;
	text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
	overflow: hidden;
	/*background: #dddddd url(../images/background.gif) repeat-x 0 0; */
}
	#header .pages {
		list-style-type: none;
		height: 20px;
		padding-top: 7px;
		background: url(../images/bgcolorHeaderup.jpg);
		/* background-color: #6d90b0; */

	}
		#header .pages li {
			float: left;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#header .pages li a {
			display: block;
			text-decoration: none;
			color: #a51d43;
			font-weight: bold;
			display: block;
			padding: 0px; 12px;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
		}
		#header .pages li a:hover {
			 border-color: #ffffff; 
		}
	#header .logo {
		float: left;
		clear: both;
		height: 70px;
	}
		#header .logo h1 {
			text-transform: uppercase;
			font-size: 2.5em;
			padding-top: 3px;
		}
			#header .logo h1 a {
				text-decoration: none;
			}
		#header .logo p {
			font-weight: bold;
			text-transform: uppercase;
			color: #888888;
		}
	#header .Welcome {
		float: right;
		margin-right:15px;
		margin-top:10px;
	}
	

	
#header .categories {
		list-style-type: none;
		height: 30px;
		margin-left: -15px;
		background-color: #4a79a5;
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			color:#FFFFFF;
		}
		#header .categories li a:hover {
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		
		#header .categories li > ul {
			display: none;
			list-style: none;
			position: relative;
			z-index: 1
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}

		
	#nav ul li.active {
 	background-color:#a51d43;
    }	
		
	


/* end Navigation Style*/
		
		
		
		.topHeader {
			
			border:solid; 
			border:1px;
			border-top:#cccbcb; 
			border-bottom:#cccbcb; 
			width:100%; 
			background: url(../images/bgcolorHeader.jpg);
		}
		
		.HeaderTitle 
		{
		float:left;
		width:300px;
		margin-left:200px;
		margin-top:15px;
			
		}
		
		
/** END header **/

/** BEGIN sidebars **/
.box {
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	padding: 6px;
	margin-bottom: 10px;
}
	.box h2 {
		background-color: #b8b8b9; 
		/* 9c9d9f */
		color: #ffffff;
		font-size: 1em;
		text-transform: uppercase;
		padding: 4px;
	}
	
	.SubDivBox{
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
	}
	
	
#lsidebar {
	width: 200px;
	float: left;
	padding-bottom: 10px;
}
	#lsidebar ul {
		list-style-type: none;
	}
		#lsidebar ul li {
			line-height: 1.4em;
			padding: 4px 0 4px 17px;
			background: url(../images/bullet.gif) no-repeat 2px 9px;
			border-bottom: 1px dotted #B6B6B6;
		}
		#lsidebar ul li a {
			color: #333333;
			text-decoration: none;
		}
		#lsidebar ul li a:hover {
			color: #4A79A5;
			text-decoration: underline;
		}
#rsidebar {
	/* width: 315px; */
	width:15%;
	float: right;
	padding-bottom: 10px;
}
	#rsidebar .ads {
		padding: 0 7px;
		text-align: center;
	}
		#rsidebar .ads img {
			margin: 7px;
		}
	#rsidebar form {
		height: 33px;
		background: url(../images/search.gif) no-repeat center 0;
	}
		#rsidebar form input {
			border: 0;
			/*width: 290px;*/
			width:15%;
			margin: 9px 0 0 5px;
		}
		#rsidebar form button {
			display: none;
		}
	#rsidebar ul {
		list-style-type: none;
		padding: 5px 8px;
	}
		#rsidebar ul li {
			line-height: 1.4em;
			padding: 5px 0;
		}
		#rsidebar ul li a {
			font-weight: bold;
		}
		#rsidebar ul li p {
			padding-top: 5px;
		}
	#rsidebar .flickr {
		text-align: center;
		padding: 0 7px;
	}
		#rsidebar .flickr img {
			margin: 6px;
		}
	#rsidebar .video {
		padding: 2px;
	}
	#rsidebar .tags {
		padding: 2px 6px;
	}
		#rsidebar .tags a {
			
		}
		#rsidebar .tags a:hover {
			
		}
/** END sidebars **/

/** BEGIN content **/
#content { 
	margin-left:200px;
	padding: 0 10px 10px 0px;
	
}
	#featured {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		margin-bottom: 10px;
		padding: 6px;
	}
	#content .featured {
		position: relative;
		padding: 0 6px 12px;
		height: 240px;

	}
		#featured h2 {
			background-color: #d6d7d7; 
			color: #ffffff;
			font-size: 12px;
			text-transform: uppercase;
			padding: 10px;
			margin-bottom: 5px;
			font-weight:bold;
		}
		#content .featured .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 5px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .featured h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		/* #content .featured img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		} */
		#content .featured p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .featured .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .featured .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .featured .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .recent {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		padding: 6px;
		margin-bottom: 10px;
	}
	#content .post {
		position: relative;
		padding: 5px;
		margin-bottom: 10px;
	}
		#content .recent h2 {
			background-color: #4A79A5;
			color: #ffffff;
			font-size: 1em;
			text-transform: uppercase;
			padding: 4px;
			margin-bottom: 5px;
		}
		#content .post .comments a {
			position: absolute;
			display: block;
			width: 31px; height: 25px;
			background: url(../images/comments.gif) no-repeat 0 0;
			top: 10px; right: 10px;
			text-align: center;
			font-size: 0.8em;
			color: #333333;
			text-decoration: none;
			padding-top: 5px;
		}
		#content .post h3 {
			font-size: 1.5em;
			margin-bottom: 10px;
			font-weight: normal;
			padding: 0 50px 0 4px;
		}
		#content .post img {
			float: left;
			margin: 5px 10px 10px 4px;
			width: 134px; height: 134px;
		}
		#content .post p {
			line-height: 1.4em;
			margin-bottom: 10px;
			padding: 0 4px;
		}
		#content .post .details {
			clear: both;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0;
		}
			#content .post .details a {
				color: #333333;
				text-decoration: none;
			}
			#content .post .details a:hover {
				color: #4A79A5;
				text-decoration: underline;
			}
	#content .postnav {
		clear: both;
		padding: 10px 0;
	}
		#content .postnav ul {
			list-style-type: none;
			padding: 10px;
		}
			#content .postnav ul li {
				float: left;
				color: #B5B4BC;
				padding: 4px;
			}
			#content .postnav ul li a {
				color: #636363;
				text-decoration: none;
				display: block;
				padding: 2px 6px;
				border: 1px solid #E2E2E2;
			}
			#content .postnav ul li a:hover {
				border-color: #ffffff;
			}
			#wp_page_numbers ul {
				border-top: 0 !important;
			}
			#wp_page_numbers .page_info {
				padding: 3px 6px !important;
				margin-right: 2px;
				border: 1px solid #e0e0e0 !important;
				margin-top: 4px;
			}
			#wp_page_numbers .active_page a {
				background-color: #ffffff !important;
				border: 0 !important;
			}
/** END content **/

/** BEGIN footer **/
#footer {
	clear: both;
	background-color: #4A79A5;
	color: #2E4B54;
	font-size: 0.9em;
	height: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
}
	#footer a {
		color: #ffffff;
	}
	#footer .wrapper {
		width: 960px;
		margin: auto auto;
		text-align: left;
	}
	#footer .l {
		float: left;
	}
	#footer .r {
		float: right;
	}
/** END footer **/

/** BEGIN miscellaneous **/
#content .single {
	padding: 2px;
}
	#content .single p {
		line-height: 1.5em;
		margin-bottom: 10px;
	}
	#content .single ul, #content .single ol {
		list-style-position: inside;
		margin-bottom: 10px;
	}
	#content .single li {
		line-height: 1.5em;
		padding: 2px 0;
	}
	#content .single blockquote {
		padding: 10px 10px 5px;
		margin-bottom: 10px;

		background-color: #eeeeee;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
	}
	#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
		font-size: 1.2em;
		margin-bottom: 5px;
	}
#comments {
	padding: 2px;
}
	#comments a {
		text-decoration: none;
	}
	#comments h2 {
		font-size: 1.6em;
		margin: 10px 0;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.6em;
	}
	#comments form {
		
	}
	#comments form p {
		margin-bottom: 5px;
	}
		#comments form input {
			margin-right: 5px;
		}
		#comments form input, textarea {
			border: 1px solid #cccccc;
			font-size: 0.9em;
			font-family: Verdana;
			padding: 4px;
			background-position: 4px 4px;
			background-repeat: no-repeat;
		}
		#comments form input {
			width: 240px;
			border: 1px solid #cccccc;
		}
		#comments form textarea {
			width: 350px;
			padding: 4px 4px !important;
			border: 1px solid #cccccc;
		}
		#comments form button {
			border: 1px solid #a0a0a0;
			font-size: 1em;
			font-family: Verdana;
			padding: 2px 6px;
		}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
h2.title {
	font-size: 1em !important;
	text-transform: uppercase;
	padding: 10px;
	color: #565656;
}
.notfound {
	padding: 40px;
}
	.notfound h2 {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 10px;
	}

/** END miscellaneous **/


#comments ol {
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0;
}
	#comments .buffer {
		padding: 10px;
	}
	#comments ol li {
		margin-bottom: 10px;
	}
	#comments ol li ul li {
		border: 1px solid #e0e0e0;
		padding: 10px;
	}
	#comments ol li .avatar {
		float: right;
	}
	#comments ol li .comment-author {
		
	}
		#comments ol li .comment-author .fn {
			font-weight: bold;
			font-size: 1.2em;
		}
	#comments ol li .comment-meta {
		font-size: 0.9em;
		color: #999999;
		margin: 5px 0 10px;
	}
	#comments ol li .reply {
		font-size: 0.9em;
		font-weight: bold;
		padding-bottom: 10px;
	}
	#comments .children {
		list-style-type: none;
	}
#comments .navigation {
	padding: 0 0 40px;
	font-size: 0.9em;
}
	#comments .navigation a {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #cccccc;
	}
	#comments .navigation a:hover {
		color: #000000;
		border-color: #000000;
		text-decoration: none;
	}
#comments .says {
	display: none;
}

.footerfont {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8pt;
	text-align:center;
	color:#eaeaea; 
	text-decoration:none;
	font-weight:bold;
    cursor:pointer;
}

.hdr {
    font-size: 13px;
    padding: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #eaeaea;
    border: solid 1px #dddddd;
	color:#4a79a5;
	font-weight:bold;
}


.leftcolbox {
    background-color: #fcfcfc;
    border: solid 1px #dddddd;
    padding: 10px;
    color: #555555;
    line-height: 1.3em;
}

.msgcnttitle {
    background-color: #f4f9f9;
    max-height: 35px;
    font-size: 13px;
    margin: auto;
	padding: 10px;
	color:#7a7a7b;
	font-weight:bold;
	border: solid 1px #dddddd;
}




.ErrorStyle { 
	color: #FFF; 
	display: inline-block; 
	padding: 1px 2px; 
	font-weight:bold;
	color:#F00;
} 







.LeftMenuLine{
border-bottom-style:dotted; 
border-bottom-width:1px; 
border-bottom-color:#dddddd;	
}


/* beginning Upload*/

input.fileStyle {
position: relative;
   font-family: calibri;
   padding: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #f1f2f2;
   cursor:pointer;
   width:500px;
   color:#3d6183;
   font-weight:bold;

}


/* end Upload 


a {
	color: #4A79A5;
}
a:hover {
	text-decoration: none;
	color: #a51d43;
}*/

.leftcolbox a:hover
{
	text-decoration:underline;
	color: #000;
	
}

.leftcolbox a
{
	text-decoration: none;
	color: #a51d43;
}

hr
{
 	color:#4a79a5;	
	
}

.ListGridHeader 
{
	/*background-color:#b8b8b9;*/
	height:20px;
	color:#fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.RotateRow
{
	color:#4a79a5;
}

.paggingRcd
{
	cursor:pointer;
	color:#a51d43;
	text-decoration: none;
}

.paggingRcd:hover 
{
	text-decoration: underline;
	color:#000000;
}

.Redcolor
{
	color:#b72035;	
}

Open in new window

0
lulu50Author Commented:
I see the submenu over the content but I can't go from report 1 to report 2 for example
0
lulu50Author Commented:
something about this

#header .categories li a {
                  /display: block;
0
Tom BeckCommented:
I'm not seeing that problem. I can hover over submenu items (IE 9). Obviously there should not be a slash in front of display:block but I don't see the slash in the latest css you posted.

Maybe it's a z-index issue. Remember that I only have the header markup to work with, not your entire page. Try increasing the z-index number in this definition:
#header .categories li > ul {
			display: none;
			list-style: none;
			position: relative;
			z-index: 1
		}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lulu50Author Commented:
Tom,

it's working but one last thing

when I hover over the menu Report and go down to report 1 or report 2 the menu "Report" moves with it.

How can I have it static not to move when the user hover over it?
0
lulu50Author Commented:
Tom

I GOT IT!!!

THANK YOU FOR ALL YOUR HELP ON THIS. !!!!!!1


LULU
0
lulu50Author Commented:
Thank you
0
Tom BeckCommented:
You're welcome. Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.