Flyout Problems....newbie

Talon · #1 (**permalink**) Jun 17th, 2008, 14:00

Hi guys, came across your forum awhile back whilst trying to teach myself web design.

Im currently redesigning a website for a friend www.waymillpools.co.uk but am having with producing a working flyout menu for the left side:

here is the new homepage im building
http://waymillpools.co.uk/Rebuild/index.html

Clicking on swimming pools causes the other options to appear. There is a transparent layer over the whole thing that when the user mouses over away from the main menu or the sub menu that appears should hide the sub menu. Behaviours are all correct in dreamweaver as far as I can tell but it just wont work in firefox, does work in IE. Any ideas? Treat me like a complete idiot as I am. Complete hash job but Im learning on the go im afraid.

Regards
T

Talon · #2 (**permalink**) Jun 23rd, 2008, 14:11

ok so ive got something working:
http://waymillpools.co.uk/Rebuild/index.html
but as you can see the sub menu is appear too far to the left. And i cant for the life of me work out why.

heres the CSS im using:

Code: Select all

.menu { margin: 10px; height: 100px; font-size: 10pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 11em; }
.menu li { background-color:transparent; float: left; }
.menu li.sub { background-color: #ccffff; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: 0px; }
.menu a, .menu a:visited { border: 0px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 11em; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 0px; }
* html .menu a, * html .menu a:visited { width: 11em; }
* html .menu a:hover { color: #000000; background-color: ransparent; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #000000; background-color:transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #000000; background-color:transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul {padding: 2em;    position: absolute;    top: -2em;    left: 7em;    background-color: transparent;    visibility: hidden;
}
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

If anyone could have a look see would be really appreciated.

Grubious · #3 (**permalink**) Jun 25th, 2008, 23:06

For your class ".menu li ul{}" try setting the left attribute to a greater number like "left: 10em;"
If this moves it, just fiddle round with it to your liking.

Talon · #4 (**permalink**) Jun 26th, 2008, 07:55

thats brilliant cheers, what a plonker i was being, thanks mate much appreciated. Actually starting to understand this CSS stuff a bit now

.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Newbie with problems with Ap div aligment	megb6806	Starting Out	4	Nov 17th, 2007 08:58
[SOLVED] Newbie having a few CSS problems!!	Graeme36	Web Page Design	18	Sep 29th, 2007 16:27
Should be simple problems but im a complete newbie	digi duck	PHP Forum	8	Jan 8th, 2007 09:47
Newbie with binary-upload-problems	martinnn	Introduce Yourself	4	Nov 1st, 2006 00:49
Trying to get this flyout menu to flyout the opposite way	davva	Web Page Design	6	Aug 30th, 2006 19:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Flyout Problems....newbie

The Following User Says Thank You to Grubious For This Useful Post:
Talon