newseed Posted September 14, 2009 Report Share Posted September 14, 2009 No, it's not game like challenge but an actual problem that I would like to see if it can be possible to solved. It's really not a problem but more or less an added feature for the client. Here's the actual site: ww w.calt rout.org/ This menu was done using DHTML Menu Builder (ht tp://softw are.xfx.net/utilities/dmbuilder/index.htm). If hover over About Us, you will see how it changes to light yellow in which it it breaks open the second level top border (intentionally). Move the mouse down to Conversation Partners and you will see the same thing. The client wanted to move away from this Menu Builder software and so I was given the task to create a css dropdown flyout menu. Here's the result: ww w.calt rout.org/new-menu/dropdown-flyout-2.html If you hover over About Us, the dropdown ul has a border around it and again with the second level. What I like to do it achieve the same visual affect as the original where the border breaks open when hovered. Example: Any suggestions how I might be able to pull this off? Quote Link to comment Share on other sites More sharing options...
virtual Posted September 15, 2009 Report Share Posted September 15, 2009 (edited) Well I have a partial solution for the top link, I imagine the flyout would work the same. I hope this helps Add height 29px to the following #nav li:hover > a.top_link { color: #294F2D; background: #ffffcc; height: 29px; } #nav li:hover > a.top_link span { background: #ffffcc; height: 29px; } #nav li:hover > a.top_link span.down { background: #ffffcc; height: 29px; } and change your z-index to -300 in this #nav li:hover ul.sub { left: 0px; top: 27px; background: #ffffcc; padding: 3px; border: 1px solid #9F7327; white-space: nowrap; width: 160px; height: auto; z-index: -300; padding: 0 5px; } If it doesn't work I'll post the complete code, as I may have missed some vital piece of info. Edited September 15, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
newseed Posted September 16, 2009 Author Report Share Posted September 16, 2009 Thanks. Unfortunately this did not work. I tried to use the same approach before to no avail. I have implemented your css code in which you can view using the original link in the first post. Quote Link to comment Share on other sites More sharing options...
Wickham Posted September 16, 2009 Report Share Posted September 16, 2009 1. I think the way I would approach it is to make images for the hover state for the top level like About which have no bottom border and are slightly higher than the top level height and overlap the drop down level concealing half the top border of Mission History. 2. Mission History's top border covers two top level items and there may be a way to break a border along part of a length. I think I read about this once but can't remember how it was done. 3. There is also another possibility using the border-image attribute which could have only part of a border along the top of About but border-image only works in modern browsers. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 Well I can assure you it worked on my Mac for the top links. I will look at it again today. I noticed that you said I have implemented your css code in which you can view using the original link in the first post. I went to the original link but the css is still the same, the added height and the change in z-index is not there. I did almost what Wickham was saying without an image, making the length of the hover state for About longer so that it covers the top border, but that only works if the drop down is behind the top link level. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 (edited) Your menu and css are at the following link: http://180virtual.com/newseed_menu/index.html I have tested on Mac in Firefox 3.5, Safari and Opera and the border is no longer there from the top link hover nor from the right hand flyout "Conservation Partners". Even the Regions top link no longer has the border on hover. However I did not bother with the left side flyouts, in case you still tell me the whole does not work. Edited September 16, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 P.S. There is a typo on your top menu Converstation in stead of Conservation Quote Link to comment Share on other sites More sharing options...
newseed Posted September 16, 2009 Author Report Share Posted September 16, 2009 Thanks virtual and my apologies because I edited the wrong css which is why you didn't see the results. I've just finished implementing the styles just prior to your last post and it does indeed work. I even touched it up a bit to have borders in the parent li which makes it much nicer. You can review my link again to see the results. As for the flyout portion, it's not really important and I certainly don't have the time to go further with this. Client is already happy as is but probably more so since you provided a solution to my feature request. You are welcome to try to find a solution for the flyout but it's not necessary. Thanks. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 (edited) Have you checked on a MAC? In Safari and Firefox from About the flyout still has a border, in Conservation the flyout is on the left with several pixels of white space and the flyouts from it don't work because of the gap. Regions has double borders on each side. In Opera there some other weird things going on. I guess you must be working on it, it's changing as I refresh. Edited September 16, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
newseed Posted September 16, 2009 Author Report Share Posted September 16, 2009 I think I have solved the flyout border issue....and yes I was working on it. Give it a look and let me know if you find good results for the dropdown / flyout. (ignore Conversation's and Region's dropdown/flyout because it's still a work in progress) Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 Yes the About drop down and flyout are fine in all 3 browsers. Let me know if you want me to check the others later on. Quote Link to comment Share on other sites More sharing options...
newseed Posted September 16, 2009 Author Report Share Posted September 16, 2009 I've just finished the menu and it's working as I hoped. Surprisingly, the son of a gun is visually the same in IE6 too. Thanks for your part in this. Quote Link to comment Share on other sites More sharing options...
virtual Posted September 16, 2009 Report Share Posted September 16, 2009 You're welcome, and Wow that is a bonus not having to mess about with IE6 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.