Drop down menu

1 reply [Last post]

Thu, 2008-07-10 14:50

kmorris

Offline

newbie

Joined: 2008-07-10

Posts: 3

Points: 0

Hi Guys

I have created a vertical drop down menu using CSS, which when you hover over the header, a list appears underneath which you can select.

The problem I am having with the menu is that everytime you click on a link the menu snaps back to the original menu displaying the headers, but not the selected page.

Hope someone can help, I can send my CSS and HTML page to show exactly what I mean.

Cheers

Kyle

Tags:

CSS Layouts

Fri, 2008-07-11 07:17

kmorris

Offline

newbie

Joined: 2008-07-10

Posts: 3

Points: 0

CSS * { padding:

CSS

*
{
padding: 0em;
margin: 0em;
}
 
body
{
background: #CCCCCC;
font-size:10px;
padding: 35px 0px 35px 0px;
}
 
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
 
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
font-size:11px;
}
 
li 
{
font-size:11px;
}
 
a
{
color: #3300FF;
text-decoration: underline;
}
 
a:hover
{
color: #3300FF;
text-decoration: none;
}
 
 
h3 span
{
font-weight: normal;
}
 
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
 
h3
{
font-size: 1.7em;
padding-right: 34px;
}
 
h4
{
font-size: 1.2em;
padding-right: 28px;
}
 
/*navigation*/
 
#dlmenu {
min-height:500px;
height:inherit;
padding: 5px;
}
 
#menu {
list-style-type:none; 
margin:0 0 10px;
min-height:500px;
height:inherit;
padding:0; 
position:absolute; 
width:inherit; 
background:#0072bb; 
z-index:100;
}
 
#menu li {
font-size:14px;
display:block; 
padding:0; 
margin:0; 
position:relative; 
z-index:100;
}
#menu li a, #menu li a:visited {
display:block; 
text-decoration:none;
}
#menu li dd, #menu li a.selected {
display:none;
}
#menu li:hover, #menu li a:hover {
border:0;
}
#menu li:hover dt a , #menu li a:hover dt a {
background:#000000;
 }
#menu li:hover dd, #menu li a:hover dd {
display:block;
}
 
#menu li:hover dl, #menu li a:hover dl {
height:inherit; 
background:#000000;
}
#menu table {
border-collapse:collapse; 
padding:0; 
margin:-4px; 
font-size:1em;
}
#menu dl {
width: 15em;
height:40px;
margin: 0;
background:#0072bb;
cursor:pointer;
border right: solid #000 1px;
border-top:1px solid #ffffff;s
padding:0;
text-align:center;
font-size: 1.1em;
height:inherit;
border-bottom:solid 1px #ffffff;
/*border-bottom:1px solid #ffffff;*/
}
#menu dd {
margin:0;
 padding:0;
 font-size: 1em;
 text-align:left;
    }
.gallery dt a, .gallery dt a:visited, li a.selected{
display:block; 
color:#ffffff;
 padding:5px 5px 5px 10px;
 background:#0072bb;
 }
.gallery dd a, .gallery dd a:visited {
color:#000;
min-height:1em;
text-decoration:none;
display:block;
padding:4px 5px 4px 20px;
background:#FFFFFF;
}
* html .gallery dd a, * html .gallery dd a:visited {
height:1em;
}
.gallery dd a:hover {
background:#999999;
color:#fff;
}
 
 
.contentarea
{
padding-top: 1.3em;
}
 
#outer
{
 
width: 82%;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}
 
#header
{
position: relative;
width: 100%;
height: 9.0em;
background: #2B2B2B url('images/topbg.jpg') repeat-x;
margin-bottom: 2px;
}
 
#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}
 
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
 
 
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
 
 
 
#headerpic
{
position: relative;
height: 109px;
background: #fff url('images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}
 
 
 
#content
{
padding: 0em 2.0em 0em 2.0em;
}
 
#primarycontainer
{
float: right;
margin-right: -18.0em;
width: 100%;
}
 
#primarycontent
{
height:500px;
margin: 1.5em 22.0em 0em 0em;
}
 
 
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
 
#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}
 
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title> Glossary </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
 
<div id="outer">
 
 
	<div id="header">
	  <div id="headercontent">
		  <h1>Glossary</h1>
		</div>
	</div>
 
 
 
	<div id="headerpic"></div>
 
 
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt><a href="#">Business Case Integration</a></dt>
	<dd><a href="index.html" >Project Background</a></dd>
	<dd><a href="Business Case Integration/project_description.html" >Project Description</a></dd>
	<dd><a href="Business Case Integration/Business_case.html" >Business Case</a></dd>
	<dd><a href="Business Case Integration/market_best_practices.html" >Market Best Practice</a></dd>
	<dd><a href="Business Case Integration/summary_business_case.html" >Summary Business Case</a></dd>
	<dd><a href="Business Case Integration/annex.html" >Annex</a></dd>
	<dd><a href="Business Case Integration/project_dependencies.html" >Other Project Dependencies</a></dd>
	<dd><a href="Business Case Integration/risk_issues.html" >Risks & Issues </a></dd>
	<dd><a href="Business Case Integration/decisons.html" >Decisions asked from DN </a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt><a href="#">Business Messaging</a></dt>
	<dt><a href="#"> 1. Background</a></dt>
	<dd><a href="Business Messaging/workstream.html" >Why This Workstream ?</a></dd>
	<dd><a href="Business Messaging/current.html" >Current</a></dd>
	<dd><a href="Business Messaging/bestpractice.html" >Best Practice</a></dd>
	<dd><a href="Business Messaging/future.html" >Future Situation</a></dd>
	<dd><a href="Business Messaging/relation.html" >Relation with AEGON</a></dd>
	<dt><a href="#"> 2. Workstream Definition</a></dt>
	<dd><a href="Business Messaging/objectives.html" >Objectives</a></dd>
	<dd><a href="Business Messaging/key_deliverables.html" >Key Deliverables</a></dd>
	<dd><a href="Business Messaging/scope.html" >Scope</a></dd>
	<dd><a href="Business Messaging/Constraints.html" >Constraints</a></dd>
	<dd><a href="Business Messaging/cost_and_benefit.html" >Cost and Benefit Analysis</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt><a href="#">Business Data Availability</a></dt>
	<dt><a href="#"> 1. Background</a></dt>
	<dd><a href="Business Data Availability/workstream.html" >Why This Workstream ?</a></dd>
	<dd><a href="Business Data Availability/current.html" >Current</a></dd>
	<dd><a href="Business Data Availability/best_practice.html" >Best Practice</a></dd>
	<dd><a href="Business Data Availability/future.html" >Future Situation</a></dd>
	<dd><a href="Business Data Availability/relation.html" >Relation with AEGON</a></dd>
	<dt><a href="#"> 2. Workstream Definition</a></dt>
	<dd><a href="Business Data Availability/objectives.html" >Objectives</a></dd>
	<dd><a href="Business Data Availability/key_deliverables.html" >Key Deliverables</a></dd>
	<dd><a href="Business Data Availability/scope.html" >Scope</a></dd>
	<dd><a href="Business Data Availability/approach.html" >Approach</a></dd>
	<dd><a href="Business Data Availability/cost_and_benefit.html" >Cost and Benefit Analysis</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt><a href="../mozilla/index.html">Glossary</a></dt>
	<dd><a href="#" >A - D</a></dd>
	<dd><a href="#" >E - H</a></dd>
	<dd><a href="#" >I - M</a></dd>
	<dd><a href="#" >N - R</a></dd>
	<dd><a href="#" >S - W</a></dd>	
	<dd><a href="#" >X - Z</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
 
	<div id="content">
 
		<div id="primarycontainer">
			<div id="primarycontent">
 
				<div class="post">
					<h3>Glossary</h3>
					<div class="contentarea">
 
 
					</div>
				</div>
</div>
 
 
 
 
 
		</div>
 
 
	</div>
 
	<div id="footer">
			<div class="right">Document Created by Lucas Melchior</a></div>
	</div>
 
</div>
 
</body>
</html>

CSS * { padding:

New forum topics

User login

Navigation