No replies
crookward
crookward's picture
Offline
Regular
Last seen: 8 years 17 weeks ago
Timezone: GMT-5
Joined: 2011-01-12
Posts: 21
Points: 26

I found/tweaked the code below to make a nice drop-down menu, but I'm trying to tweak it to get the same results as http://pingability.com navigation. I've got a decent rounded background behind the 2nd level drop-down element, but can't wrap my head around getting a hover effect around the parent link as well as the child links underneath (like the referenced site does). Any ideas?

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}
 
#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 13px verdana;}
 
	#sddm li a
	{	display: block;
		margin: 0 9px 0 7px;
		padding: 4px 10px;
		background: transparent;
		color: #000;
		text-align: left;
		text-decoration: none;}
 
	#sddm li a:hover
	{	text-decoration: underline; }
 
#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	width: 150px;
	background: url(../images/menu-drop-bg.png) left bottom transparent no-repeat;
	margin-left: 6px;
	z-index: 1000;}
 
	#sddm div a
	{	position: relative;
		margin: 0;
		padding: 10px;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		color: #000;
		font: 12px verdana;}
 
	#sddm div a:hover
	{	text-decoration: underline;
		background: transparent;
		}

<ul id="sddm">
	<li><a href="#" style="margin-left:26px;">Home</a></li>
	<li>            	
		<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">About Us</a>
		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="#">Clinical Staff</a>
			<a href="#" style="padding-bottom:18px;">Testimonials</a>
		</div>
	</li>
	<li>            	
		<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Services</a>
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="#">Industrial Services</a>
			<a href="#">Wellness Services</a>
			<a href="#" style="padding-bottom:18px;">Rehab Services</a>
		</div>
	</li>
	<li><a href="#">News &amp; Events</a></li>
	<li>
		<a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Patient Resources</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="#">Insurance Info</a>
			<a href="#">Patient Forms</a>
			<a href="#" style="padding-bottom:18px;">Pay Your Bill</a>
		</div>
	</li>
	<li>
		<a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()" style="margin-right:0;">Contact Us</a>
			<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
				<a href="#" style="padding-bottom:18px;">Office Locations</a>
			</div>
	</li>
</ul>

http://www.iwrtherapysystems.com/demo

Thanks!

~James~