Hi Folks,
I am attempting to modify a navigation list on a website that I was asked to
help out with. The reason I agreed to modify the navigation is because the
site is for a nonprofit disability related organization.
The site currently has a vertical list for their navigation with styles
applied. They have asked me to modify the navigation to add some fly-out sub
links to a few of the links in the navigation list. I have tried a few ideas
that I had but have had no success in formatting the navigation to work as
they would like.
I am including the html and the css from the site.
The Html:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html#SkipNavigation" id="current">Who we
are</a></li>
<li><a href="mission.html#SkipNavigation">Mission</a></li>
<li><a href="calendar.html#SkipNavigation">Calendar</a></li>
<li><a href="support_us.html#SkipNavigation">Support Us </a></li>
<li><a href="become_member.html#SkipNavigation">Become a Member </a></li>
<li><a href="board.html#SkipNavigation">Board Members</a></li>
<li><a href="login.php#SkipNavigation">Members Area</a></li>
<li><a href="consumer_quotes.html#SkipNavigation">Consumers Quotes</a></li>
<li><a href="links.html#SkipNavigation">Links</a></li>
<li><a href="annual_report.html#SkipNavigation">Annual Report</a></li>
<li><a href="position_papers.html#SkipNavigation">Position Papers </a></li>
<li><a href="contact_us.html#SkipNavigation">Contact Us</a></li>
<li><a href="site_map.html#SkipNavigation">Site Map</a></li>
</ul>
</div>
The CSS:
#navcontainer {
width: 115px;
background-color: #336699;
}
#navcontainer ul
{
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #336699;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 120px;
background-color: #336699;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
#navlist
{
margin-left: 0px;
margin-right:5px; padding-right:20px
padding: 3px;
border: 1px solid #336699;
width: 13.5em;
background-color: #336699;
font: 12px verdana,sans-serif;
}
#navlist li
{
list-style: none;
border: 1px solid #26a;
}
#navlist a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 4px 4px 4px 8px;
}
#navlist a:hover { border-color: #124; }
.NavLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8.5pt;
font-style: normal;
line-height: 165%;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
}
Here is a sample link to give you an idea of what I need to do -
http://www.cssplay.co.uk/menus/flyoutt.html, I've tried to apply the theory
from this page to their existing navigation but I can't get it to work
properly. When I add the sub links I get a bulleted list instead of a
fly-out type of navigation.
I would greatly appreciate any advice you can offer with regard to adding a
sub link fly-out to the existing navigation.
Thanks,
John
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
