driz Posted March 28, 2009 Share Posted March 28, 2009 Hello, please take a look at http://driz.co.uk/menu.htmlI have created a CSS menu that will be positioned in the top right of the screen, when a user hovers a link a menu appears below. This is all fine, except for the very last item, the menu will go off screen, what I need to do is make it so that the last and only the last item has an alternate drop down in that it becomes right aligned (but the text remain left).I want to keep this as much CSS as possible, but if JS is really really needed then I will compromise, but I would prefer to keep it CSS Only!Any ideas etc?EDIT: if you look at this: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm and scroll down to demo 4 and then hover the SEARCH item, you will see an example of what I mean. All the others are left aligned, and then that last one becomes right aligned to keep it in screen.Thanks 4 help. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 29, 2009 Share Posted March 29, 2009 I can see nothing in the CSS forcing the change in position for the right hand submenu.I am not a javascript guru, but if you view the comments on the js file, there is a comment that the js detects the browser edge for positioning of the drop-down. Looks to me like javascript is responsble for this behaviour. Or shorten the link text? Link to comment Share on other sites More sharing options...
Shade Posted March 29, 2009 Share Posted March 29, 2009 I tried tweaking HTML a little :adjust the last ul position as: <li><a href="" accesskey="6">Company</a> <ul style="left:-100px;" > // yep it worked for me <li><a href="">About SolidCAM UK</a></li> <li><a href="">Team</a></li> <li><a href="">FAQ's</a></li> .. and disable "min-width" in "#nav li ul" or set it to "180px" Link to comment Share on other sites More sharing options...
driz Posted March 29, 2009 Author Share Posted March 29, 2009 I've kept the min-width at 230px, and then added left:-112px to the far right menu!I'm testing this on Safari, and the right menu should align to the edge of the menu and SO should the second to last menu, it works for me in Safari perfect, although in Firefox and Opera, then second to last is about 2-3 px's over to the right and not aligned perfectly :/ can you test in other browsers please (as I don't have a Windows PC), and let me know if any problems arise, thanks. Link to comment Share on other sites More sharing options...
Shade Posted March 29, 2009 Share Posted March 29, 2009 tested on windows using :1. firefox 3 OK2. Opera 9 OK3. google chrome OK 4. IE 7, no hover effect ! Link to comment Share on other sites More sharing options...
Ingolme Posted March 29, 2009 Share Posted March 29, 2009 tested on windows using :1. firefox 3 OK2. Opera 9 OK3. google chrome OK 4. IE 7, no hover effect ! Internet Explorer 7 has a :hover pseudoclass of you use a Strict DTD on your page. Link to comment Share on other sites More sharing options...
driz Posted March 30, 2009 Author Share Posted March 30, 2009 In order to get everything pixel perfect I've had to specify the sizes of the parent lists! The last two menus that drop down should align perfectly with the edge of the red box. Can anyone confirm this is the case on Windows please thanks. Also what was the error with IE7, does it just need the DOCTYPE declaring strict and that fixes the issues? I've added one for testing purposes. Link to comment Share on other sites More sharing options...
Ingolme Posted March 30, 2009 Share Posted March 30, 2009 Most browsers go into a "Standards compliant mode" when you apply a Strict doctype. This was done in order to maintain backwards compatibility with older pages that were made when HTML 4.01 didn't exist.Browsers purposely display these pages "wrong" so that they look the same as they used to 10 years ago. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.