Hi Everyone! My name is Rhonda and I am working on the website for my church. The site is http://www.grantspasscsl.org. I have recently offered to help them improve it but I am by no means a web designer or programmer. I can manipulate basic html but am faced with the minister wanting the drop down menu to be horizontal instead of vertical. Personally I don't really care for the design of the existing menu and think it’s clunky but I don't have the skills to write a new one on my own. The minister likes the one at http://www.cslsr.org/ but I don't think I can create it. Anyway, below is the css for the existing fly out menu. I did make an attempt and changed the display to inline in the #navbar li and changed the width to zero in #navbar. Basically, I am looking for any and all help so we can have a decent horizontal menu on our website that looks nicer and not so clunky. I appreciate any and all help.
With much gratitude!
Rhonda
Code:
/* Fly-out menu */
#navbar {
width: 0;
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline;
float:left; /* Optional. Removes space between menu elements */
}
#navbar li a {
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#navbar li ul {
display: none;
background-color: #69f;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}
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);
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
Bookmarks