1 reply [Last post]
jallard
Offline
Regular
Last seen: 17 years 51 weeks ago
Joined: 2003-04-25
Posts: 11
Points: 0

Hi Everyone!

I may be asking an impossibility, but can someone guide me on how to create a

Quote:
"Horizontal drop down menu bar"
by utilizing the script seen below?

Quote:
<style type="text/css">
a {
text-decoration: none;
}

a:link {
color: rgb(165,16,16);
}

a:visited {
color: rgb(132,99,0};
}

a:active {
color: rgb(165,16,16);
}

a:hover {
text-decoration: underline;
}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

.nav a {
font-weight: bold;
color: green;
}

.nav a {
text-decoration: none;
}

.nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}

.nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid rgb(132,99,0};
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid rgb(132,99,0};
border-width: 1px 0;
}

li.first {
border-left-width: 1em;
}

li.last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: url(images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px rgb(132,99,0};
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}

hr {
display: none;
}

p {
clear: left;
background: url(images/remora.gif) center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}

p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: rgb(132,99,0});
padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
display: block;
border: 1px solid rgb(132,99,0};
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">

<hr />

<ul class="nav">

<li id="first">
<ul><li><div><a href="">Home</a></div></li></ul>
<div><a href="">About Us</a></div>
<ul>
<li><img src="images/flag.gif" width="100" height="27" alt=" American Flag (2K)" /></li>
<li><a href="">Director's Note</a></li>
<li><a href="">Mission Statement</a></li>
<li><a href="">Clinical Staff</a></li>
<li><a href="">Board of Directors</a></li>
</ul>
</li>

<li>
<div><a href="">Programs</a></div>
<ul>
<li><a href="">204 Depot Street</a></li>
<li><a href="">206 Depot Street</a></li>
<li><a href="">206 Depot Street</a></li>
<li><a href="">Wilderness Hike</a></li>
<li><img src="images/minuteman.gif" width="58" height="80" alt="minuteman (4K)" /></li>
</ul>
</li>
<li>
<div><a href="">Accolades</a></div>
<ul>
<li><a href="">Voices From the Community</a></li>
<li><a href="">Success Stories</a></li>
<li><img src="images/monument.gif" width="58" height="80" alt="monument (5K)" /></li>
</ul>
</li>
<li>
<ul><li><div><a href="">Contact Us</a></div></li></ul>
<li class="last">
<ul><li><div><a href="">Contact Us</a></div></li></ul>
</li>

</ul>

<hr />

Also, below is what you see in my source code--say for example, my index.php file:

Quote:
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<div align="center">
<table summary="0" width="760px" cellpadding="0" cellspacing="3" bgcolor="#EFEFEF">
<tr><td><center><table summary="0" width="90" cellpadding="0" cellspacing="0" bground="#004A18">
<tr>
<td><img src="images/header.gif" width="654" height="136" alt="header (29K)" /></td>
</tr>
</table></center></center></td></tr>
<tr><td class="nav"><? include ('menu.php') ?></td></tr>
<tr><td bgcolor="#ffffff"><!-- this is just the extra white space between the header and the content field--></td></tr>
<tr><td>

The project that I am working on has 7 Main pages along with 8 subpages: (see http://www.204depot.org).

Any suggestions would be most appreciated. Sometimes it takes another set of eyes to see mistakes!

Thanks very much for your assistance.

Joe Allard

Tags:
Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 22 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Creating da drop down menu

You could try this one

http://www.csscreator.com/css-forum/ftopic1248.html

Regards
Day

The only way to learn is to do it yourself