# mouse over link options...help



## paulb100 (Mar 17, 2005)

I use Dreamweaver 8 and Frontpage 03

How do I make my links display a sub-set of links/options when my mouse hovers over a link?

thanks


----------



## TheRobatron (Oct 25, 2007)

You could use Javascript to change the innerHTML property of a div on an onHover event, or you could create a dropdown menu in CSS (see here). You could do this with javascript, but it's always better to do it with CSS where possible.


----------



## paulb100 (Mar 17, 2005)

i dont know how to apply it? im newbie - im not really using CSS just building basic pages and setting my own properties.... ive tried copying the code into a new page to test but it just shows the links down the page


----------



## TheRobatron (Oct 25, 2007)

Which type of effect do you want? Do you want the drop-down menu like in the example, or a bar below the menu that displays extra links?


----------



## paulb100 (Mar 17, 2005)

drop-down menu


----------



## TheRobatron (Oct 25, 2007)

OK if you post the menu items you want, I can give you some code.


----------



## paulb100 (Mar 17, 2005)

thanks...

The title of the link is * WHAT WE OFFER *

*1-2-1 Personal Training
Fitness Camps/Classes
Corporate Services
Nutrition / Weight Management
Sports Massage Therapy
Specialist Running Packages
Postural Assessments*

Thanks again


----------



## TheRobatron (Oct 25, 2007)

Here's the HTML for the menu and the CSS. You'll have to edit the href attributes to change where the link points to and you can change the title attirbute so when a user hovers over the link it'll display a tool tip with your text. Add this CSS into the section of the page (unless you want it on multiple pages, in which case you should put it in an external file):


```

```
Then put the HTML between the tags:


```
[LIST]
[*][URL=menu/index.html]WHAT WE OFFER[/URL]



	[LIST]
	[*]<a href="#" title="">1-2-1 Personal Training[/URL]
	[*][URL=#]Fitness Camps/Classes[/URL]
	[*][URL=#]Corporate Services[/URL]
	[*][URL=#]Nutrition / Weight Management[/URL]
	[*][URL=#]Sports Massage Therapy[/URL]
	[*][URL=#]Specialist Running Packages[/URL]
	[*][URL=#]Postural Assessments[/URL]

	[/LIST]
```
HTH


----------



## paulb100 (Mar 17, 2005)

thanks very much - thing is it only works in IE7..?? I use Firefox and it just displays links down side of page in FF3.... see screenshot


----------



## caraewilton (Nov 7, 2007)

Hi Paul. I have used quite a few of stu nichols' menus and other things. His stuff tends to work best when the page validates. Have a look here.
Although I am not saying that this is the only problem.
Where have you placed the css. On your style sheet or in your html page? I have found that cleaning up the html and css helps get things working.
Another thing I have found (although have no academic knowledge to base this on) a lot of Stu's techniques tend to work better on pages that have been set up using css as apposed to layout tables.


----------



## caraewilton (Nov 7, 2007)

Another thought. Try getting the menu to work on a new page. Make sure your doc type is xhtm-strict


----------



## paulb100 (Mar 17, 2005)

I just put it into pages where he said too - Ive been using tables but tested it on a new html page - when previewed in IE7 it works but in FF3 it doesnt...theres no other code on the page except what a new html page starts with and the code ive been told to add....

It doesnt matter cos it doesnt look like I can use it anyway - Ive already created the page using tables cos im not familiar with CSS, ive just downloaded a CSS Video Tutorial so I will have a look at that - is CSS relatively new? I done Dreamweaver courses in 2005 and whilst CSS was introduced there as a means to set styles of font and colors etc to be used in pages - it wasnt used instead of tables?? my links are in cells


----------



## caraewilton (Nov 7, 2007)

Oh well that rules that out then. What type of doctype are you using?


----------



## TheRobatron (Oct 25, 2007)

This seems rather odd - I wrote the code while testing it in FF3. Here's the actual file that I wrote - it works fine in IE 7 and FF3 (you'll have to change the extension from .txt to .htm or .html). Are you putting the CSS in the head and the HTML in the body?

CSS has been around for a while, but a lot of people still use tables for layout (though slowly most are moving to CSS because of the many advantages). You can combine CSS with a tabular layout; just place the div inside the [TD]. I suspect that problems may occur however if there are nested tables because browsers can get confused over things like that (though that's just speculation - I haven't tried it). Converting your site to CSS would be a good move, but I think it'll still work fine as it is with the CSS.


----------



## paulb100 (Mar 17, 2005)

Ive copied your code from text file into a BLANK new HTML doc in Dreamweaver CS3 and again it only works in IE7 - I have to say the code is laid out different to the 1st lot but wields exactly the same results - yes I was putting the code in the right places....

FF3 does have Adblock but with that disabled it still happens...??

Im sure its related to



because if you look at my screenshot FF3 displays the DEMOS as a link but IE7 doesnt display anything about DEMOS - when I remove this code nothing appears in FF3 but still works as normal in IE7

Ive gotten some CSS tutorials - gunna have a look at them


----------



## TheRobatron (Oct 25, 2007)

Sorry about that - I just tried it in FF again and I got the same problem. I had it working perfectly earlier, so I must have changed something just before posting it. I'll have a look at the code and post the woking version ASAP.


----------



## paulb100 (Mar 17, 2005)

thanks , I really appreciate it


----------



## TheRobatron (Oct 25, 2007)

Found the problem 

It was the long lines of dashes after the comment 


WHAT WE OFFER



1-2-1 Personal Training
Fitness Camps/Classes
Corporate Services
Nutrition / Weight Management
Sports Massage Therapy
Specialist Running Packages
Postural Assessment
 




[/HTML]


----------



## paulb100 (Mar 17, 2005)

yeah that works - thanks very much


----------



## TheRobatron (Oct 25, 2007)

No problem. Let me know if you need any more help with CSS.


----------



## paulb100 (Mar 17, 2005)

Robatron - i need help...again haha , Im developing a download site (just for practise while Im waiting for customer to get his act together and come over with site details)

I want to be able to do same as before but instead of list going down the list appears underneath and across...

heres a screenshot of what ive done and ive drawn in where the options (links) would go... thing is.. i havnt decided on what links are going in but I do know that all my links will want a list to appear.... (apart from HOME and FORUM)

should I come back when I have decided?


----------



## TheRobatron (Oct 25, 2007)

I'll have a go at some code now 

I'll make it so you can insert your options as you want them.


----------



## paulb100 (Mar 17, 2005)

thanks man...


----------



## paulb100 (Mar 17, 2005)

here is a screenshot of how ive finally got it laid out with pink/red
just incase you need to know


----------



## TheRobatron (Oct 25, 2007)

I've got this code that should do what you want (with a little help from our friend Stu Nicholls of course ):

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Document

[LIST]
[*][URL=#]HOME[/URL]
	
	[LIST]
		[*][URL=#]zero dollars[/URL]

		[*][URL=#]wrapping text[/URL]
		[*][URL=#]styled form[/URL]
		[*][URL=#]active focus[/URL]
		[*][URL=#]shadow boxing[/URL]
		[*][URL=#]image map[/URL]

	[/LIST]
	

[*][URL=#]SECURITY[/URL]
	
	[LIST]
		[*][URL=#]spies menu[/URL]
		[*][URL=#]vertical menu[/URL]

		[*][URL=#]enlarging list[/URL]
		[*][URL=#]link images[/URL]
		[*][URL=#]non-rectangular[/URL]
		[*][URL=#]jigsaw links[/URL]
		[*][URL=#]circular links[/URL]
	[/LIST]

	

[*][URL=#]INTERNET[/URL]
	
	[LIST]
		[*][URL=#]Fixed 1[/URL]
		[*][URL=#]Fixed 2[/URL]
		[*][URL=#]Fixed 3[/URL]

		[*][URL=#]Fixed 4[/URL]
		[*][URL=#]minimum width[/URL]
	[/LIST]
	

[*][URL=#]MAINTAINANCE[/URL]
	
	[LIST]

		[*][URL=#]spies menu[/URL]
		[*][URL=#]vertical menu[/URL]
		[*][URL=#]enlarging list[/URL]
		[*][URL=#]link images[/URL]
		[*][URL=#]non-rectangular[/URL]
		[*][URL=#]jigsaw links[/URL]

		[*][URL=#]circular links[/URL]
	[/LIST]
	

[*][URL=#]UTILITIES[/URL]
	
	[LIST]
		[*][URL=#]drop down menu[/URL]

		[*][URL=#]cascading menu[/URL]
		[*][URL=#]content:[/URL]
		[*][URL=#]mozzie box[/URL]
		[*][URL=#]rainbow box[/URL]
		[*][URL=#]snooker cue[/URL]
		[*][URL=#]target practise[/URL]

	[/LIST]
	

[*][URL=#]AUDIO[/URL]
	
	[LIST]
		[*][URL=#]example one[/URL]
		[*][URL=#]weft fonts[/URL]

		[*][URL=#]vertical align[/URL]
	[/LIST]
	

[*][URL=#]VIDEO[/URL]
	
	[LIST]
		[*][URL=#]opaque colours[/URL]

		[*][URL=#]opaque menu[/URL]
		[*][URL=#]partial opacity[/URL]
		[*][URL=#]partial opacity II[/URL]

	[/LIST]
	

[*][URL=#]MISC[/URL]
	
	[LIST]

		[*][URL=#]spies menu[/URL]
		[*][URL=#]vertical menu[/URL]
		[*][URL=#]enlarging list[/URL]
		[*][URL=#]link images[/URL]
		[*][URL=#]non-rectangular[/URL]
		[*][URL=#]jigsaw links[/URL]

		[*][URL=#]circular links[/URL]
	[/LIST]
	

[*][URL=#]FORUM[/URL]
	
	[LIST]

		[*][URL=#]spies menu[/URL]
		[*][URL=#]vertical menu[/URL]
		[*][URL=#]enlarging list[/URL]
		[*][URL=#]link images[/URL]
		[*][URL=#]non-rectangular[/URL]
		[*][URL=#]jigsaw links[/URL]

		[*][URL=#]circular links[/URL]
	[/LIST]
	

[/LIST]
```
You can obviously change, add or remove the lower options and colour scheme as you wish, but it looks better if one of the lower options aligns with the upper option that is being hovered over.


----------



## paulb100 (Mar 17, 2005)

thanks for that


----------



## paulb100 (Mar 17, 2005)

thats great Robotron.. but how do I change it so that HOME and FORUM dont have any options appear underneath (but still there and have link only on the words HOME and FORUM)? (sorry should have made that clear) and i need it 893 pixels wide , i can change the color myself

thanks again Robotron I REALLY appreciate your work

EDIT: also I cant have anything directly above OR below it..?! it appears to need about a 30pixel gap above and below (including the submenus underneath)


----------



## TheRobatron (Oct 25, 2007)

You can remove the links on the bottom bar by taking out the 
 element and its contents:

```
<li>
<a href="#">HOME<!--[if IE 7]><!--></a><!--<![endif]-->
</li>

<li>
<a href="#">FORUMS<!--[if IE 7]><!--></a><!--<![endif]-->
</li>
```
I'm having a bit of trouble resizing it - does it have to be that width? I managed to add extra links, but actually resizing the individual links is giving me some problems. I'll have another go when I get a chance a bit later tonight, and changing the padding shouldn't be a problem.


----------

