Hi,
I am working on a project located at the following link:
http://www.sitesbysarah.com/brownbottle/bb_about.html
I found instructions online for horizontal drop down navigation which is just what I was looking for. But I am having some problems implementing it. I have never worked with a drop down menu before.
I have two items that have a drop down menu - “menu link” and “contact link” right now. Might add more later. When I click on the “menu” link, the 2nd tier links appear over to the left. This is too far away from the main link and when I drop down to click on them, they dissappear. Can’t reach them fast enough. I tried “float: center;” but that didn’t really work for me either.
The second part is that on the hover, the green border on the bottom extends out further than the word. I just want it to underline the word, not the padded area around it. Is there a way to change that? The only working links on this page are the “home” link and the “about” links right now.
I will put the css code below:
<style>
/* These styles create the dropdown menus. */
#navcontainer {
position: absolute;
top: 120px;
right: 100px;
margin: 0;
padding: 0;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 15px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
font-weight: bold; }
#navbar li a:hover {
border-bottom: 3px solid #bcbf54;
color: #bcbf54;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: inline;
left: 0px;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: left; }
#navbar li:hover li a, #navbar li.hover li a {
color: #bcbf54; }
#navbar li li a:hover {
color: #bcbf54;
}
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Any advice would be greatly appreciated.
Thanks,
sarb