Need help with Menu

Hi,

I am using IE9, Please test using the same browser.

I have a menu that looks like this:

topMenu.jpg
The sub-menu looks like this:

submenu
the problem that I am having is with the sub of the sub-menu

Sub of the Sub-Menu
I am having issues with Sub of the Sub-Menu (It is not displaying correctly)

Here's my HTML Code

 
<menu id="nav">  
    <ul class="categories" style="font-size:12px;">
		<li><a href="index.cfm" class="index" style="font-weight:bold;">Home</a></li>
        <li style="width:150px;"><a href="#" class="test" target="_self" style="font-weight:bold;">Add New Test</a>
				<ul style="border-bottom: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;">
					<li> 
						<a href="AddRule.cfm" class="AddRule" target="_self" style="font-weight:bold;">Rule</a>
					</li>
					<li> 
						<a href="#" class="AddRule" target="_self" style="font-weight:bold;">CAP Admin UI</a>
					</li>
					<li style="border-left:1px solid red;border-right:1px solid red; border-bottom:1px solid red; border-top:1px solid red;"> 
						<a href="#" class="AddRule" target="_self" style="font-weight:bold;">Content</a>     
         					<ul style="border-left:1px solid green;border-right:1px solid green; 
                            	border-bottom:1px solid green; border-top:1px solid green;width:600px;margin:0 auto;">
								<li style="display: inline-block;float:right;"> 
									<a href="#" class="AddRule" target="_self" style="font-weight:bold;">Assessment</a>
								</li>
							</ul>            
					</li>
                    
					<li> 
						<a href="#" class="AddRule" target="_self" style="font-weight:bold;">Letter</a>
					</li>
				</ul>
		</li>
 		<li style="width:100px;"><a href="#" class="Report" style="font-weight:bold;">Report</a>
 		<ul style="width:250px;border-bottom: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;">
 			<li><a href="SOReport.cfm">Status/Outcome Report</a></li>
            <li><a href="AdHocReport.cfm">Ad Hoc Report</a></li>
 		</ul>
 		</li>
        <li>
        <a class="Contact" style="font-weight:bold;" href="mailto:lmakhoul@bcbsm.com?subject=Blaze Unit Testing">
        Contact Us</a>
        </li>
 	</ul>
  </menu>  
 

Open in new window


here is my 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 .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 0 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			color:#FFFFFF;
		}
		#header .categories li a:hover {
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
			position:relative;
			z-index:1;
		}
		
		#header .categories li > ul {
			display: none;
			list-style: none;
			position: relative;
			z-index: 1;
		}
		#header .categories li > ul li {
			/*float: none;	*/
			width:100%;
			text-align:left;
		}
		#header .categories li:hover > ul {
			display: block;
		}

		#header .categories LI > UL LI 
		{
			background-color: #4a79a5;
			border-top: solid 1px #fff;
			font-weight:bold;
		}
		
		
	#nav ul li.active {
 	background-color:#a51d43;
    }	
	
	
	ul#categories  ul { 
  display: none; 
} 

	
/* 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 { 
	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



Thank you
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.

Steve BinkCommented:
One of the parent containers of the submenu list is hiding its overflow.  You can try overflow:visible on each of the parents until you find the one(s) that are doing it.  Of course, this could have some other impacts, so you'll have to experiment.  

Also, instead of your relative float strategy, perhaps try position:absolute..  ?
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:
Steve Bink,

Thank you so much for your reply

Yes, position:absolute did solve my issue.

Thanks again :-)

Lulu
0
lulu50Author Commented:
Thank you
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.