Recently I have been trying to make a drop down navigation bar for my website, I have gotten past the HTML formatting side of things, but it is the Cascading Style Sheets which trips me up. So far, I have a horizontal navigation menu in bullet form at the top of my website screen. I was wondering if someone could tell me how to adjust or change my CSS codes in order to make it work on my website. I have the CSS codes started, but I don't know if I am doing them correctly. I checked them, and the Nav bar does not look too good with the CSS codes I have. Any help would be appreciated. Many thanks, Joe Peterson
Attached are CSS:
.navcontainer {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px;
height: 20px;
width: 616px;
margin: 0 auto;
}
.navcontainer ul {
padding: 10px 0px 10px 0px;
list-style-type: none;
}
.navcontainer ul li {
margin: 0 2px 0 2px;
float:left;
position:relative !important;
}
.navcontainer ul li a,
.navcontainer ul li a:visited {
display: block;
font-size: 1em;
color: black ;
text-decoration:none;
text-align: center;
width: 100px;
height: 20px;
border: 1px solid red;
border-width: 1px 1px 1px 1px;
background: #00ff00;
padding-left: 0px;
line-height: 20px;
}
- html .navcontainer ul li a, .navcontainer ul li a:visited {
width: 104px; w\idth: 104px;
}
.navcontainer ul li ul { display: none; }
.navcontainer ul li:hover a {
color: blue;
background: white;
}
.navcontainer ul li:hover ul {
display: block;
position: absolute !important;
top: -4px;
margin-top: 17px;
left: 0px;
width: 104px;
}
.navcontainer ul li:hover ul li ul { display: none; }
.navcontainer ul li:hover ul li a {
display: block;
background: yellow;
color: green;
height: auto;
line-height: 20px;
padding: 0px 0px;
width: 100px;
}
.navcontainer ul li:hover ul li a:hover {
background: red;
color: white;
}
.navcontainer ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px;
top: -27px;
width: 146px;
}
.navcontainer ul li a:hover {
text-decoration: none;
color: blue;
background:yellow;
}
.navcontainer ul li a:hover ul {
display: block;
position: absolute !important;
top: 2px;
background: none;
margin-top: 7px;
left: 0px;
}
.navcontainer ul li a:hover ul li a {
display: block;
background: white;
color: red;
height: auto;
line-height: 20px;
padding: 0px;
width: 145px;
}
.navcontainer ul li a:hover ul li a ul { visibility:hidden; position:absolute; height: 0; width: 0; }
.navcontainer ul li a:hover ul li a:hover {
background: blue;
color: gold;
}
.navcontainer ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px;
color: #000000;
left: 147px;
}
/ADD TO FIX IE/ /* a hack so that IE5.5 faulty box model is corrected */
html .navcontainer a, * html .navcontainer a:visited { width: 125px; w\idth: 139px; }
/* another hack for IE5.5 */
html .navcontainer ul ul { top: 30px; t\op: 31px;
}/* style the table so that it takes no part in the layout - required for IE to work */.navcontainer table { position:absolute; top:auto 0; left:0; }
/* yet another hack for IE5.5 */
html .navcontainer ul ul a { width: 125px;
w\idth: 104px;
}/*END EXTRA ADDS FOR IE*/ /* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when hover on 1st level list OR link */
.navcontainer ul a:hover ul,
.navcontainer ul:hover ul {
visibility:visible;
}
/* keep the 3rd level hidden when you hover on 1st level list OR link */
.navcontainer ul a:hover ul ul,
.navcontainer ul:hover ul ul {
visibility:hidden;
}
/* keep the 4th level hidden when you hover on 2nd level list OR link */
.navcontainer ul li a:hover ul li a:hover ul ul,
.navcontainer ul li:hover ul li:hover ul ul {
visibility:hidden;
}
/* make the 3rd level visible when you hover over 2nd level list OR link */
.navcontainer ul a:hover ul a:hover ul,
.navcontainer ul:hover ul:hover ul {
visibility:visible;
}
/* make the 4th level visible when you hover over 3rd level list OR link */
.navcontainer ul li a:hover ul li a:hover ul li a:hover ul,
.navcontainer ul li:hover ul li:hover ul li:hover ul {
visibility:visible;
}
HTML codes:
<div id="my_banner"></div>
