More Help

[james.davis]

Thank you everyone for your help over the past few days. I have most of the page done now. The submenu is still frustrating me! I have it positioned where I want it I just cannot get it centered. I have put the "margin: 0 auto;" everywhere and still now effect. In both FF and IE the further right I go on the menu… the more right it drifts.

http://www.nucm.org

Here is my CSS for the menu:

/*

---

START menu

---

*/

div#menu {
height: 260px;
width: 970px;
background-image: url(‘../images/imgHeader.png’);
background-repeat: no-repeat;
list-style: none;
}

div#menu li {
float: left;
}

div#menu li a {
display: block;
float: left;
height: 58px;
}

div#menu div#table {
display: table;
margin-top: 155px;
}

div#menu .selectmenu {
list-style: none;
display: table-cell;
white-space: nowrap;
}

div#menu .selectmenu a#home {
text-indent: -9999px;
background: url(‘../images/home.png’);
background-position: top center;
background-repeat: no-repeat;
width: 88px;
}

div#menu .selectmenu a#about {
text-indent: -9999px;
background: url(‘../about/images/about.png’);
background-position: top center;
background-repeat: no-repeat;
width: 95px;
}

div#menu .selectmenu a#believe {
text-indent: -9999px;
background: url(‘../believe/images/believe.png’);
background-position: top center;
background-repeat: no-repeat;
width: 128px;
}

div#menu .selectmenu a#schedule {
text-indent: -9999px;
background: url(‘../schedule/images/schedule.png’);
background-position: top center;
background-repeat: no-repeat;
width: 122px;
}

div#menu .selectmenu a#events {
text-indent: -9999px;
background: url(‘../events/images/events.png’);
background-position: top center;
background-repeat: no-repeat;
width: 132px;
}

div#menu .selectmenu a#city {
text-indent: -9999px;
background: url(‘../city/images/city.png’);
background-position: top center;
background-repeat: no-repeat;
width: 74px;
}

div#menu .selectmenu a#action {
text-indent: -9999px;
background: url(‘../action/images/action.png’);
background-position: top center;
background-repeat: no-repeat;
width: 129px;
}

div#menu .selectmenu a#request {
text-indent: -9999px;
background: url(‘../request/images/request.png’);
background-position: top center;
background-repeat: no-repeat;
width: 106px;
}

div#menu .selectmenu a#giving {
text-indent: -9999px;
background: url(‘../giving/images/giving.png’);
background-position: top center;
background-repeat: no-repeat;
width: 89px;
}

div#menu .selectmenu li:hover a#home {
background-image: url(‘../images/home.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 88px;
}

div#menu .selectmenu li:hover a#about {
background-image: url(‘../about/images/about.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 95px;
}

div#menu .selectmenu li:hover a#believe {
background-image: url(‘../believe/images/believe.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 128px;
}

div#menu .selectmenu li:hover a#schedule {
background-image: url(‘../schedule/images/schedule.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 122px;
}

div#menu .selectmenu li:hover a#events {
background-image: url(‘../events/images/events.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 132px;
}

div#menu .selectmenu li:hover a#city {
background-image: url(‘../city/images/city.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 74px;
}

div#menu .selectmenu li:hover a#action {
background-image: url(‘../action/images/action.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 129px;
}

div#menu .selectmenu li:hover a#request {
background-image: url(‘../request/images/request.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 106px;
}

div#menu .selectmenu li:hover a#giving {
background-image: url(‘../giving/images/giving.png’);
background-repeat: no-repeat;
background-position: bottom center;
width: 89px;
}

div#menu .selectsubmenu {
display: none;
}

div#menu .submenu {
display: table;
padding: 66px 0 0 0;
list-style: none;
}

div#menu .selectmenu :hover .selectsubmenu {
display: block;
position: absolute;
z-index: 100;
}

div#menu .selectmenu :hover .submenu li a {
display: block;
float: left;
background: transparent;
padding: 0 10px 0 10px;
white-space: nowrap;
border: 0;
}

div#menu .selectmenu :hover .submenu li a:hover; {
visibility: visible;
}

/*

---

END menu

---

*/

[Nodster]

Like Edwin i couldn’t find a solution. Although i did find a possible bug with your menu.

All of your submenus seem to be left aligned however when you go through the links some of the ul elements shift depending on the page. A page refresh gets rid of this but it might be something to look at just incase it is a prob.

[Author]

Posts