The CSS Menu I have moves the contents of the div tag below it sideways.

I am posting only the CSS styles for it because the code inside the <body> tag utilizes only the styles.

The menu div tag is the id #navMenu. The content is in three div tags (#sideMenu, #midText, #rightMenu), all of which are inside the #MainText div.

Any suggestions? I tried messing with the s-index but to no avail.

<style type="text/css">
/*Style for Banner*/
#Banner {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:250px;
	z-index:1;
	/*border-style: solid;
	border-width: 3px;
	border-color: #000000;*/
	background:#FFF;
}


/*Style for department*/
#BlackText {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:990px;
	height:20px;
	z-index:5;
	PADDING:5px;
	background-color:#000;
	color: #FFF;
	text-align: right;
}


/*Navigation Menu styles : First is for the div tag*/
#navMenu {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:30px;
	background-color:#030;
	z-index:5;
}
#nav {
	list-style:none;
	font-weight:bold;
	z-index:5;
	text-transform: uppercase;
	width:1000px;
	text-align:left;
	margin:0;
	padding:0;
	
}
#nav li {
    float:left;
    text-align:center;
	width:166px;
	
}
#nav a  {
    display:block;	
	padding:5px;
	color:#fff;
	background:#030;
	text-decoration:none;
	
}
#nav a:hover{
    color:#fff;
	background:#060;
		
}
#nav ul{
    background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:relative;
	display:none;	
}
#nav ul li{
    padding-top:1px;
	float:none;
	width:375px;
	text-align:left;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{
    left:-40px;
	display:block;
}


/*Main div body*/
#MainText {
	position:relative;
	width:1000px;
	height:500px;
	z-index:0; 
	background:#E2DDAD;
	margin-left:auto;
	margin-right:auto;
}
#sideMenu{
     float:left;
	 height:inherit;	  
	 width:200px;
	 z-index:0; 	 
}
#midText{
     float:left;
	 height:inherit;	  
	 width:600px;
	 z-index:0;	
}
#rightMenu{
     float:left;
	 height:inherit;	  
	 width:200px;
	 z-index:0;
}
</style>

Recommended Answers

All 4 Replies

Could we have the html for this? It would make it a lot easier to determine exactly what is the problem.

I agree with suhaildawood. With the html I'd try it out, but I can't visualise it from this. Is the #navMenu inside or outside #Banner in the html? You don't have a wrapper/container div in the html? Where is #BlackText? If you post the html, it will be clearer.

Actually, I'have been busy with the side and I figured out why this was happening - the positioning of the two divs. If they are relative, then the menue moves the rest of the stuff. If they are absolutely positioned, it's all well and good.

Thanks for the help though.

Glad you got it working!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.