WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Help with dropdown menu and borders

Reply
  Thread Tools Display Modes
Old 6th July 12, 04:13 PM   #1
freckles
WLC Member
 
Join Date: Jul 2012
Posts: 4
Default Help with dropdown menu and borders

I would like a border around my drop down menu on hover. I want the right and left borders on the top menu to align with the border on the drop down. And I don't want to see the border underneath the text on the top menu.

Also background color on the top menu on hover doesn't appear to be working in explorer.

Since it's hard to explain what I'm looking for I'm including a mockup.


And I'm attaching what I have for my code also.

Please help. Thanks in advance.
freckles is offline   Reply With Quote
Old 6th July 12, 04:29 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Help with dropdown menu and borders

You will have to give the parent element and the "drop down" the same width to make the border "line up"

Quote:
And I don't want to see the border underneath the text on the top menu.
Not a chance! A border is either on or off, you cannot have a partial border.
chrishirst is offline   Reply With Quote
Old 6th July 12, 05:13 PM   #3
freckles
WLC Member
 
Join Date: Jul 2012
Posts: 4
Default Re: Help with dropdown menu and borders

There is no way to achieve this with a z-index?
freckles is offline   Reply With Quote
Old 7th July 12, 12:12 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Help with dropdown menu and borders

?? z-index is for arranging the stacking order it will not affect how borders appear.
Unless you were thinking along the lines of positioning AND stacking another element to obscure a portion of the border, which I would highly NOT recommend attempting.

I have done some rather unusual "proof of concept" CSS experiments but I consider that impractical because at the minimum it would need a child element to affect the parent.

Even with javascript it would be difficult to be precise with where the "contact points" between parent and child actually are.
chrishirst is offline   Reply With Quote
Old 9th July 12, 01:53 PM   #5
freckles
WLC Member
 
Join Date: Jul 2012
Posts: 4
Default Re: Help with dropdown menu and borders

Somehow they seem to have achieved the same effect on this website
freckles is offline   Reply With Quote
Old 10th July 12, 12:21 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Help with dropdown menu and borders

yes that can be done with some relative positioning and overlapping in the stacking HOWEVER it is not the same as your original specification asks for:

ie:
Quote:
I want the right and left borders on the top menu to align with the border on the drop down.
That's the bit that makes your request impractical.
chrishirst is offline   Reply With Quote
Old 12th July 12, 02:38 PM   #7
freckles
WLC Member
 
Join Date: Jul 2012
Posts: 4
Default Re: Help with dropdown menu and borders

Quote:
Originally Posted by chrishirst View Post
yes that can be done with some relative positioning and overlapping in the stacking HOWEVER it is not the same as your original specification asks for:

ie:


That's the bit that makes your request impractical.

It's hard to explain what I want to do which is why I included a picture. Is the picture I attached possible? My request looks the same as the website menu I found just with a thicker border. Would anyone be able to help me with code?


This would work for me if I can figure out how to flip the last menu so that it is contained within the frame. And also center the text on the top menu. Any help would be much appreciated.
freckles is offline   Reply With Quote
Old 12th July 12, 11:28 PM   #8
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Help with dropdown menu and borders

On your example website, their effect is achieved by the white line already being there. Then they just cover the small portion somehow, which wihtout digging into the code, I'm not sure how. Possible by just extended the heights of the LI 1px.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:25 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.