Hi Availor.
Sorry for the delay on responding. I've been swamped.
I'll show you examples of my code and you can see if it will work for you. Keep in mind that I use Coldfusion for development. The premise is the same and the code is basic CSS and HTML. I did glean some of this from other websites, but it's been quite awhile and I don't have a url for you to check out on its implementation.
Here's my styles sheet:
Code:
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 200px;
list-style: none;
}
/*From IE 7 lack of compliance*/
ul#navmenu:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu li {
float: left; /*For IE 7 lack of compliance*/
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #003698;
/*border-right-color: #003698;*/
/*border-bottom-color: #003698;*/
background: #294CB8;
/*background: #2E56CD;*/
padding : 0px 5px 0px 5px;
display: block;
color: #FFFFFF;
font: 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
font-weight : bold;
font-style : italic;
}
/* Root Menu Hover */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #486CD7 /*url(arrow-listx.gif) no-repeat center right*/;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
border: 1px solid #294CB8;
/*border-right-color: #003698;*/
/*border-bottom-color: #003698;*/
background: #486CD7;
color: #DCE3F8;
font-weight : bold;
}
/* 2nd Menu Hover */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #6F8BDF /*url(arrow-listx.gif) no-repeat center right*/;
color: #003698;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
border: 1px solid #294CB8;
/*border-right-color: #003698;*/
/*border-bottom-color: #003698;*/
background: #6F8BDF;
color: #DCE3F8;
font-weight : bold;
}
/* 3rd Menu Hover */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #92A7E7;
color: #003698;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
border: 1px solid #294CB8;
/*border-right-color: #003698;*/
/*border-bottom-color: #003698;*/
background: #486CD7;
color: #FFFFFF;
font-weight : bold;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #6F8BDF;
color: #003698;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
And then here's my navigation menu using the style sheet above:
Code:
<ul id="navmenu">
<li><a href="index.cfm?id=1000">Home</a></li>
<li><a href="#">Media Center</a>
<ul>
<li><a href="index.cfm?id=4100">Press Releases</a></li>
<li><a href="index.cfm?id=4200">Newsletters</a></li>
</ul>
</li>
<li><a href="index.cfm?id=2000">Events</a></li>
<li><a href="index.cfm?id=3000">Contact Us</a></li>
<br />
<span class="Title">Inside SEBP</span>
<li><a href="index.cfm?id=5100">About SEBP</a>
<ul>
<li><a href="index.cfm?id=5101">Overview & Mission</a></li>
<li><a href="index.cfm?id=5103">Founders</a></li>
<li><a href="index.cfm?id=5104">Board of Trustees</a></li>
<li><a href="index.cfm?id=5105">Board of Governors</a></li>
<li><a href="index.cfm?id=5106">Staff</a></li>
</ul>
</li>
<li><a href="#">Member Exclusives</a>
<ul>
<li><a href="index.cfm?id=5201">Featured Member</a></li>
<li><a href="index.cfm?id=5203">Services & Resources</a></li>
<li><a href="index.cfm?id=5204">Testimonials</a></li>
</ul>
</li>
<li><a href="#">Join SEBP</a>
<ul>
<li><a href="index.cfm?id=5302">Member Benefits</a></li>
<li><a href="index.cfm?id=5303">Top 10 Reasons to Join SEBP</a></li>
<li><a href="index.cfm?id=3000">Contact Us</a></li>
</ul>
</li>
<li><a href="index.cfm?id=5400">Members/Partners</a>
<ul>
<li><a href="index.cfm?id=5401">Founders</a></li>
<li><a href="index.cfm?id=5402">Board of Trustees</a></li>
<li><a href="index.cfm?id=5403">Board of Governors</a></li>
</ul>
</li>
</ul>
Then for reference, here's the site using the CSS based navigation above:
www.sebp.org
It's pretty straight forward. I've commented the CSS to show the details and highlight the fixes for IE.
Hope this is helpful.
Bookmarks