css flyout issue

[Rowan]

Hey, I've got my flyout menu working to some degree, however the CSS and HTML behind it is very 'inconvenient' and doen't allow much proper customisation. For example the 'submenu' class should be applied to the HREF element, not the LI. It's much more appropriate to use the hrefs for styling rather than the list elements, because you're really rolling over the link and not the list, if that makes sense.

In the 'categories_ul_generator.php' page, how can I move the 'menu' class onto the href element as opposed to the LI?

[Rowan]

On second thought, I just noticed the advantage of keeping it the way it is. Ie: the first first list item retains it's hover state when you go deeper into the submenu.

Hmm, I guess it can stay this way.

Here's my CSS if anyone wants to have a go:

div#nav-cat ul {
	list-style: none;
	margin:0;
	padding:0;
}
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4 {
	background-color: #def;
	width: 13em;
}
div#nav-cat li {
	position: relative;
}
div#nav-cat li:hover {
	background-color: #fff;
}
div#nav-cat li a, div#nav-cat li a:visited {
	display: block;
	padding: .2em;
	text-decoration: none;
	border-bottom: 1px solid #9cf;
}
div#nav-cat li.submenu {
	background-image: url(../images/arrow_blue01.gif);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}
div#nav-cat li li.submenu:hover {
	background-position: 100% 50%;
}
div#nav-cat ul ul {
	position: absolute;
	top: 0;
	left: 13em;
	display: none;
	border-right: 1px solid #9cf;
	border-left: 1px solid #9cf;
	border-top: 1px solid #9cf;
	margin: -1px 0 0 0;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}#centerContent #mainContent {
	padding: 0 .5em;
}

You'll need to change the name of the background image for your own image.

[DesignbyDemeter]

This thread's a bit over my head - I installed the flyout mod and it seemed to go very well.

This is how it appears in both FF & IE -

1) Its purple (not that I don't love purple but - you know what I mean
2) It's not aligning with the rest of the template.

Where do I stack hacking, um I mean modifying...

(Screen shot attached)
Thanks,
Laura

[FreedomWebDev]

Hi,

My flyout menu doesn't respond in IE yet is working perfectly in FF. I tried the stylesheet Rowan offered and that doesn't help either. Any Ideas?

[fricy]

did you put the csshover.htc file in the right place?
f.

Hi,

My flyout menu doesn't respond in IE yet is working perfectly in FF. I tried the stylesheet Rowan offered and that doesn't help either. Any Ideas?

[FreedomWebDev]

Well just after posting that I did notice the line at the top of stylesheet_categories_menu.css which points to includes/csshover.htc and noticed it wasn't there, it had got missed out altogether. Hope it helps someone else, it's always the little things!