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 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>
