Hi,
I am working on a website with a navigation menu that has a drop down action. So basically, if you click on the link, “Services”, a drop down list appears below it. I have the navigation attached to the webpage as an “include” so that I don’t have to change it on every page.
Here is a link to the page with the drop down navigation on the left.
http://www.oaknoll.com/test/test_index1.asp
Here is the code for that menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oaknoll - An Adult Retirement Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder, health care, assisted living, nursing care">
<meta name="Description"
content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">
</head>
<body>
<div id="navcap">
<img src="images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />
</div><!--end-navcap-->
<div id="nav">
<dt> <a href="test_index1.asp"><b>Home</b></a> </dt>
<dt><b>LifeCare</b></dt>
<dd>
<ul>
<li><a href="test_independent_living.asp">Independent Living</a></li>
<li><a href="test_assisted.asp">Assisted Living</a></li>
<li><a href="test_health_center.asp">Health Center</a></li>
</ul>
</dd>
<dt><b>Health Services</b></dt>
<dd>
<ul>
<li><a href="test_social_services.asp">Social Services</a></li>
<li><a href="test_health_services.asp">Health Services</a></li>
<li><a href="test_physical_therapy.asp">Physical Therapy</a></li>
<li><a href="test_dietician.asp">Dietician</a></li>
<li><a href="test_companions.asp">Companions</a></li>
</ul>
</dd>
<dt><b>Amenities</b></dt>
<dd>
<ul>
<li><a href="test_dining.asp">Dining Services</a></li>
<li><a href="test_transportation.asp">Transportation</a></li>
<li><a href="test_theater.asp">Movie Theater</a></li>
<li><a href="test_internet_cafe.asp">Internet Cafe/Coffee Shop</a></li>
<li><a href="test_game_rooms.asp">Game Rooms</a></li>
<li><a href="test_libraries.asp">Library</a></li>
<li><a href="test_sewing.asp">Sewing Room</a></li>
</ul>
</dd>
<dt><b>Recreation/Wellness</b></dt>
<dd>
<ul>
<li><a href="test_wellness.asp">Wellness</a></li>
<li><a href="test_programs.asp">Programs</a></li>
<li><a href="test_pool.asp">Pool/Spa</a></li>
<li><a href="test_salon.asp">Salon</a></li>
</ul>
</dd>
<dt><b>About Oaknoll</b></dt>
<dd>
<ul>
<li><a href="test_history.asp">History</a></li>
<li><a href="test_resident_council.asp">Oaknoll Resident Council</a></li>
<li><a href="test_board_of_directors.asp">Board of Directors</a></li>
<li><a href="test_foundation_board.asp">Foundation Board</a></li>
</ul>
</dd>
<dt><b>Services</b></dt>
<dd>
<ul>
<li><a href="test_maintenance.asp">Maintenance</a></li>
<li><a href="test_housekeeping.asp">Housekeeping</a></li>
<li><a href="test_laundry.asp">Laundry</a></li>
<li><a href="test_technology.asp">Technology</a></li>
<li><a href="test_banking.asp">Banking</a></li>
</ul>
</dd>
<dt><b>Employment</b></dt>
<dd>
<ul>
<li><a href="test_employment.asp">Employment</a></li>
<li><a href="test_jobopenings_new_website.asp">Current Openings</a></li>
<li><a href="pdf/Application_2012_for_website.pdf" target="blank">Application</a></li>
</ul>
</dd>
<dt><a href="test_contact.asp"><b>Contact Us</b></a></dt>
</div>
<div id="ldirector">
<a href="test_executive_director.asp"><p>Patricia Heiden ~ <br />
A Director With a Dream. <br/><br/>
Click here to learn more...</p></a>
</div> <!--director-end-->
<div id="ladministrator">
<a href="test_administrator.asp"><p>Meet <br/>
Steve Roe, <br />
our Administrator</p></a>
</div> <!--administrator-end-->
</body>
</html>
Css for the navigation is below:
#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 10px 10px 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}
#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}
The client has asked that when a viewer is in, for example, the “Services” tab, the drop down items stay in a static dropped down state on all the “Services” pages so that their clients won’t have to keep going back and forth to see all the links that are in the “Services” tab. Would like the menu to stay open when they are in, for example, services. I have taken a screen shot of what I want it to look like.
I’m not really sure how to single out an element like this. Not sure if I need to change something in the javascript or is it something I can do in the css?
Any help/advice would be appreciated.
Thanks,
Sarb
