Jump to content

Strange Menu Glitch


chibineku

Recommended Posts

I am making some drop down menus and I have got most of it working, except that when focus shifts from the original li to the one that appears under it, the background image of the original anchor vanishes (I may change them so they aren't anchors at all, but we'll see). You can see the effect here (note it only works for pages that aren't the current page):Lookit ma weird menuAlso, I was wondering how to make the menu stay open when an item is clicked on. This is the first real trial of my CSS and I think I'm doing ok for a beginner in my understanding of selectors, etc., but this is just not working. I've even tried changing the hover and focus properties of the new (pop up) li selector to set the top level li background, but it won't take.Many thanks for any help! It's a lot of code, so looking at the source would be easiest, I think.Edit: I have changed the pop up content to links and they now behave as though they are block items, taking a new line, even when I change them explicitly to inline.

Link to comment
Share on other sites

If i understood corectly, you can use java script on div.For example <div onmouseover="document.getElementById('ID').className='Class name';">or <div onmouseover="document.getElementById('ID').style.background-image:url(corner.gif);">or so~

Link to comment
Share on other sites

JavaScript is an option, of course, but I want to use CSS wherever possible to make the site as robust as it can be. JavaScript is slower and can be turned off.

Link to comment
Share on other sites

change:#nav a:focus, #nav a:hover, #nav a:active{background:transparent url(/images/tabonleft.png) no-repeat scroll left bottom;}to:#nav a:focus, #nav li:hover a, #nav a:active{background:transparent url(/images/tabonleft.png) no-repeat scroll left bottom;}Only tested in firefox using firebug, and it works.the sublevels using span and a is totally wrong! they usually go like this (as used in suckerfish menu)<ul id="nav"><li><a href="#">Home</a></li><!--start - end home--><li><a href="#">Catalogue</a> <ul><!--begin sublevel content--> <li><a href="">Today</a></li><!--start - end sublevel today--> <li><a href="">Archive</a></li><!--start - end sublevel archive--> </ul><!--end sublevel content--></li><!--end catalogue--><li><a href="#">Custom Products</a> <ul><!--begin sublevel content--> <li><a href="">Today</a></li><!--start - end sublevel today--> <li><a href="">Archive</a></li><!--start - end sublevel archive--> </ul><!--end sublevel content--></li><!--end Custom Products--></ul> <!--End Id="nav"-->

Link to comment
Share on other sites

Thou are truly a god (of CSS code) amongst men (of CSS code).The bad news is there's been a design change and She Who Is Without Name But Who Is In Charge wants click-and-stay-open buttons which means I need to start from scratch anyway. I will reserve this option for a no-JavaScript style sheet and I'll import them conditionally, so it will still be of service.Muchos gracias.

Link to comment
Share on other sites

Hm, I see. That makes a lot of sense. I was going to have to do that anyway for the click-through menus. Thank you for your extra info :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...