chibineku Posted August 18, 2009 Share Posted August 18, 2009 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 More sharing options...
kakaini Posted August 18, 2009 Share Posted August 18, 2009 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 More sharing options...
chibineku Posted August 18, 2009 Author Share Posted August 18, 2009 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 More sharing options...
dsonesuk Posted August 18, 2009 Share Posted August 18, 2009 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 More sharing options...
chibineku Posted August 18, 2009 Author Share Posted August 18, 2009 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 More sharing options...
chibineku Posted August 18, 2009 Author Share Posted August 18, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.