Horizontal Drop Down Menu question

[sam0077]

Hello, I used the free horizontal drop-down menu that SEO Consultants offers on their website.

I wanted to change it so that the first button: HOME, links at the top level. Actually I wanted users to click on all the top levels.

Does anyone know how to change the code so that the first level also has an .html file to link to?

Signed: A Newbie

 

[monksnake]

Man, we ALL know how to do that!! sheesh.

<.

 

[sam0077]

Can you give me some direction or suggestion?

 

[monksnake]

I'm sorry I'm being a smart@$$.

The problem is based on your question, no one would have any idea what you are talking about. Also, I'm assuming the dropdowns are done in javascript, so the javascript forum, forum216, is the place to ask. (I recommend you post the code as well).



<.

 

[Foamcow]

You need to show us some code.

I would imagine that because the script came from SEO consultants that it may be using CSS.

Again, if you can show us some code either in this thread or from your URL we stand a better chance of being able to offer some help and advice.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BillyRayPreachersSon]

You can't drink a pint of Bovril.

I bet you could... but you'd probably glue your mouth together. Eww!

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[sam0077]

Hi, it is CSS and XHTML. Here are the files.

As you will see, I was trying to create home where you click on the word (HOME) and it takes you back to index.html. Didn't work. I think the problem is with the CSS (or both).
Thank you for your input.

XHTML CODE:
------------------------------------------------
<div id="menu">
<ul>
<li><h2>home</h2> <a href="index.html" title="home"></a>home</li>
</ul>

<ul>
<li><h2>about</h2>
<ul>
<li><a href="profile.html" title="about">profile</a></li>
<li><a href="resume.html" title="resume">services</a> </li>
</ul>
</li>
</ul>

<ul>
<li><h2>marketing</h2>
<ul>
<li><a href="marketing.html" title="marketing">marketing</a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>advertising</h2> <a href="advertising.html" title="advertising"></a> </li>
</ul>

<ul>
<li><h2>resource center</h2>
<ul>
<li><a href="mktgnews.html" title="latest marketing news">latest marketing news</a></li>
<li><a href="mktgres.html" title="marketing research">marketing research</a> </li>
<li><a href="pricing.html" title="pricing">pricing</a> </li>
<li><a href="tools.html" title="marketing tools">marketing tools</a> </li>
</ul>
</li>
</ul>

<ul>
<li><h2>contact</h2>
<ul>
<li><a href="contact.html" title="contact">contact</a></li>
</ul>
</li>
</ul>
------------------------------------
CSS CODE
------------------------------------
/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */

/* Begin CSS Popout Menu */

#head{
height: 50px;
}

#menu{
width:70em;
float:left;
text-align: center;
margin-left: +4em;
margin-top: +.20px;
padding: 0 0 0 0;
font-family: "Calisto MT", Monaco, serif;
}

#menu a, #menu h2{
font:bold;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space: nowrap;
font-family: "Calisto MT", Monaco;
font-size: .9em;
color: #777777;}

#menu h2{
color: #838383;
background: #ffffcc;
}


#menu a{
background: #ffffcc;
text-decoration:none;
}


#menu a, #menu a:visited{
color: #838383;
}

#menu a:hover{
color:#000;
background:#ddd;
}

#menu a:active{
color:#060;
background:#ccc;
}

#menu ul{
list-style:none;
float:left;
width:120px;
padding: 0 0 0 0;
}


#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:400;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background: #eee -999px -9999px;
}


div#menu li:hover{
cursorointer;
z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
font-weight:bold;
background:#eee;
}

#menu a.x:hover{
color:#a00;
background:#ddd;
}

#menu a.x:active{
color:#060;
background:#ccc;
}

/* End CSS Popout Menu */

 

[Foamcow]

You have to have the first line too.
It's from Spaced

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[monksnake]

look closely at this:

<li><h2>home</h2> <a href="index.html" title="home"></a>home</li>

The anchor tag contains nothing.

<.

 

[sam0077]

What does that mean? What is the anchor tag? Sorry it is a very stupid question.

 

[monksnake]

Ok I'll explain.

You have an opening anchor (<a>) tag : <a href="index.html" title="home">
Immediately after, you have a closing anchor (</a>) tag: </a>

Inbetween those tags, you need something (usually text).
The elements between those tags is what is clicked on to take you to other pages.

So, your change would be this:

<li><h2>home</h2><a href="index.html" title="home">Home</a></li>

*Notice Home is after the <a> and before the </a>.


<.

 

[monksnake]

Backup, sorry. You also need to remove the header tag <h2>. It is not pretty to put an <h2> in an <li>, plus home would be written twice.

<li><a href="index.html" title="home">Home</a></li>

<.

 

[sam0077]

When I take away the <h2> tags, it removes the formatting of the text. It also removes the box. Any reason why it does this?

 

[monksnake]

Yeah, it's cause of the CSS declarations of the <h2> object

Do this (personally I'm not a fan of header tags within list items):

<li><h2><a href="index.html" title="home">Home</a></h2></li>

I'll take a look at it myself, and fix anything that is wrong, brb!!

<.

 

[monksnake]

Here, this is what I did to clean it up a bit.


Change the CSS in the appropriate (where these elements are defined in the CSS) places to this:

#menu a, #menu h2{
font:bold;
padding-top:0px;
height:20px;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space: nowrap;
font-family: "Calisto MT", Monaco;
font-size: .9em;
color: #777777;}

#menu h2{
color: #838383;
background: #ffffcc;
}


#menu a{
display:block;
width:120px;
background: #ffffcc;
text-decoration:none;
}

Change the HTML line to this:

  <li><h2><a style="font-size:1em" href="index.html" title="home">Home</a></h2></li>

<.

 

[sam0077]

Thank you Monksnake -- For some reason it is not working with my code. It added another box around where the 2nd level drop-down should be for the HOME button.

Users need to click on the top-level HOME box and go to index.html.

 

[monksnake]

Ok, I got some time this morning. I'll go through the entire code and clean it all up. I personally think the CSS is written terribly.

(Gives me something to do while I wait on a slacker here at work)

<.

 

[monksnake]

Alright, here is a complete working example of the menu (CSS cleaned up).

The way this is written and the way it was written, it will NOT work in IE hover psuedoclass on list items).

If you are using Firefox, it should look perfect with the hovers.

In IE, you can still click on the top level items for a page jump.

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>

<style type="text/css">

* {
   padding:0px;
   margin:0px;
}

div#menu{
   width:70em;
   float:left;
   text-align: center;
   margin:100px 0px 0px 100px; /* Just random placement */
   padding:0px;
   font-family: "Calisto MT", Monaco, serif;
}

div#menu ul{
   list-style:none;
   float:left;
   width:120px;
}

div#menu h2 {
   font-size:11pt;
   border:1px solid;
   border-color:#ccc #888 #555 #bbb;
   white-space:nowrap;
   height:20px;
   color: #838383;
   background-color:#ffffcc;
}

* html div#menu h2 {
   height:22px;
}


div#menu ul li a {
   display:block;
   font-family:"Calisto MT", Monaco;
   color: #777777;
   border:1px solid;
   border-color:#ccc #888 #555 #bbb;
   white-space:nowrap;
   background-color:#ffffcc;
   text-decoration:none;
   width:118px;
}

div#menu ul li a.topLevelAnchor {
   border:none;
   height:20px;
}

div#menu a:visited {
   color: #838383;
}

div#menu a:hover {
   color:#000000;
   background-color:#dddddd;
}

div#menu a:active {
   color:#060060;
   background:#cccccc;
}

#menu ul ul{
   display:none;
}

#menu ul ul li a {
   font-size:.8em;
   padding-top:2px;
   height:18px;
}

div#menu ul li:hover {
   cursor:pointer;
}

div#menu ul li:hover ul {
   display:block;
}

</style>
</head>

<body>
<div id="menu">
   <ul>
     <li><h2><a class="topLevelAnchor" href="index.html" title="home">home</a></h2></li>
   </ul>

   <ul>
     <li><h2>about</h2>
       <ul>
         <li><a href="profile.html" title="about">profile</a></li>
         <li><a href="resume.html" title="resume">services</a> </li>
       </ul>
     </li>
   </ul>

   <ul>
     <li><h2>marketing</h2>
       <ul>
         <li><a href="marketing.html" title="marketing">marketing</a></li>
        </ul>
     </li>
   </ul>

   <ul>
     <li><h2><a class="topLevelAnchor" href="advertising.html" title="advertising">advertising</a></h2></li>
   </ul>

   <ul>
     <li><h2>resource center</h2>
       <ul>
         <li><a href="mktgnews.html" title="latest marketing news">latest marketing news</a></li>
         <li><a href="mktgres.html" title="marketing research">marketing research</a> </li>
         <li><a href="pricing.html" title="pricing">pricing</a> </li>
         <li><a href="tools.html" title="marketing tools">marketing tools</a> </li>
       </ul>
     </li>
   </ul>

   <ul>
     <li><h2>contact</h2>
       <ul>
         <li><a href="contact.html" title="contact">contact</a></li>
        </ul>
     </li>
   </ul>
</div>
</body>
</html>

<.