Forum Moderators: not2easy
I can't seen to center the "headings" of my horizontal css dropdown menu. I am using Suckerfish's script. The headings are:
HOME ¦ ABOUT US ¦ JOIN ¦ NEWS ¦ EMAIL ¦
The CSS..
body {
margin: 0px;
background-color: #eda;
}
#navbar { width: 90%;
font: 78%/1.5 arial, helvetica, serif;
background-color: #ffffec;
text-align: center;
padding: 0;
margin: .1em;
background: #eda;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
list-style: none;
line-height: .9;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 0 0;
width: 61em;
}
#nav a {
display: block;
width: 10em;
color: #800000;
text-decoration: none;
padding: 0.5em 2em;
}
#nav a.daddy {
background-color: #;
}
#nav li {
float: left;
padding: 0;
width: 5em;
}
#nav li ul {
position: absolute;
left: -999em;
height: 0;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 10em
}
#nav li ul a {
width: 13em;
width: 13em;
}
#nav li ul ul {
margin: -1.75em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
<HTML>
<div id="navbar">
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#" class="daddy">ABOUT US</a>
<ul>
<li><a href="#" class="daddy">OUR VISION</a></li>
<li><a href="#" class="daddy">LEADERSHIP</a></li>
<li><a href="#" class="daddy">ADVISORY BOARD</a></li>
<li><a href="#" class="daddy">BYLAWS</a></li>
<li><a href="#" class="daddy">DONATE</a></li>
<li><a href="#" class="daddy">PORTSIDE</a></li>
</ul></li>
<li><a href="#" class="daddy">JOIN US</a>
<ul>
<li><a href="#">MEMBERSHIP FORM</a></li>
<ul>
<li><a href="#">Mail-in printable Form</a></li>
</ul></li>
<li><a href="#">MEMBERSHIP GOODIES</a></li>
<li><a href="#">PUBLICATIONS</a></li>
<ul>
<li><a href="#">CORRESPONDER</a></li>
<ul><a href="#">Archives_Corresponder</a></li>
</ul></li>
<li><a href="#">DIALOGUE & INITIATIVE</a></li>
<ul>
<li> <a href="#">Archives_Dialogue</a></li>
</ul></li>
</ul></li>
<li><a href="#">CCDS STATEMENTS</a></li>
<li><a href="#">MEMBER STORIES</a></li>
</ul></li>
<li><a href="#" class="daddy">NEWS</a></li>
<ul>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">NEWS ARTICLES</a></li>
<li><a href="#">ACTION ALERTS</a></li>
<li><a href="#">CCDS STATEMENTS</a></li>
<li><a href="#">EXTRA LINK</a></li>
</ul></li>
<li><a href="mailto:" class="daddy">EMAIL</a></li>
</ul>
Thanks,
Senmar
>>centering headings
#nav li {
float: left;
padding: 0;
width: 5em;
}
#nav a {
display: block;
width: 10em;
color: #800000;
text-decoration: none;
padding: 0.5em 2em;
}
The #nav li items are the ones dictating the width of each individual heading, and at the minute the <a> anchor elements nested inside them are specified to be wider than them: this below will not fix all your code as I'm not sure exactly what other effects you want, but try changing this
#nav a {
display: block;
text-align: center;
width: 100%;
color: #800000;
text-decoration: none;
padding: 0.5em 0;
}
that is now saying you want the link to be 100% of the width of the parent <li> and then set text-align: center; on it, then also remove the left and right side padding which may cause you width error depending on text width, the center alignment should take care of it..
If that's not wide enough you should then try adjusting the width of the <li> and <ul> elements accordingly
Suzy
