2 replies [Last post]
sheit
Offline
newbie
Last seen: 11 years 14 weeks ago
Joined: 2009-03-29
Posts: 2
Points: 0

Trying to create a dropdown menu toolbar... Would have 5 tabed images accross and two of them would have a drop down on hover.

I am unable to get this to work, I cannot figure out how i would put more then two or the tool bar images in a row and only have the hover effect one of them...

Mod Edit: link moved from separate thread
http://www.fpmsi.com/test/index.html

<!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>
 
 
 
<style>
* {
	margin: 0;
	padding: 0;
}
img {
	display: block;
	border: none;
}
body {
	font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
	color: #595959;
	background: #e5f0ff;
}
#container {
	width: 980px;
	margin: 0 auto;
	padding: 0 2px;
	position: relative;
}
 
h1{
	font-size: 1.0em;
	padding:5px
}
 
div.box div.links { display:none; } 
div.box:hover div.links { display:inline; } 
div.box div.links:hover { display:inline !important;} 
 
 
.hoverbox:hover{background: transparent url(images/solutionback.png); z-index: -1; width: 557px; height: 244px;}
 
					div.aCol {
						width: 160px;
						height: 148px;
						padding: 15px 0 0 16px; 
						float: left;
					}
					.aCol ul{ list-style-type: none; }
 
					div.bCol {
						width: 150px;
						height: 148px;
						padding: 15px 0 0 10px;
						float: left;
					}
					.bCol ul{ list-style-type: none; }
 
					div.cCol {
						width: 174px;
						height: 148px;
						padding: 15px 0 0 20px;
						float: left;
					}
					.cCol ul{ list-style-type: none; }
 
					div.footer {
						padding: 12px;
						clear: both;
						line-height: 16px;
					}
</style>
 
</head>
<body>
	<div id="container">
 
<img src="images/Home.png" />
 
		<div class="box"> 
<div class="hoverbox"><img src="images/Solutions2.png" />
<div class="links">
<div class="aCol">
	<h1>Marketing Storefront</h1>
	<ul>
		<li><a href="#">Digital Storefront</a></li>
		<li><a href="#">Digital Asset Management</a></li>
		<li><a href="#">Collateral Customization</a></li>
	</ul>
		<h1>Direct Marketing</h1>
	<ul>
		<li><a href="#">Direct Mail</a></li>
		<li><a href="#">E-Mail Marketing</a></li>
		<li><a href="#">Personalized URLs (PURLS)</a></li>
	</ul>
</div>
 
<div class="bCol">
		<h1>Fulfillment</h1>
	<ul>
		<li><a href="#">Literature Fulfillment</a></li>
		<li><a href="#">Promotional Fulfillment</a></li>
		<li><a href="#">Kitting & Assembly</a></li>
	</ul>
		<h1>Inventory Management</h1>
	<ul>
		<li><a href="#">Marketing Solutions</a></li>
		<li><a href="#">Marketing Solutions</a></li>
		<li><a href="#">Marketing Solutions</a></li>
	</ul>
</div>
 
<div class="cCol">
	<h1>Print Solutions</h1>
	<ul>
		<li><a href="#">Digital Print</a></li>
		<li><a href="#">Commercial Print</a></li>
		<li><a href="#">Print On Demand</a></li>
	</ul>
 
		<h1>Promotional Products</h1>
	<ul>
		<li><a href="#">e-Store Solutions</a></li>
	</ul>
</div>
 
<div class="footer">
	<h1>My Marketing Solutions</h1>
</div>
 
</div>
</div> 
<img src="images/Home.png" />
 
 
 
</body>
</html>

AttachmentSize
envelopes.png1.46 KB
Home.png3.55 KB
solutionback.png2.91 KB
Solutions.png3.89 KB
Solutions2.png4.03 KB
sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 8 years 32 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

This dropdown article should

This dropdown article should help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Or this one which uses a

Or this one which uses a more accessible image replacement technique.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference