Geek Answers Handbook

Dropdown Styling - CSS (border around the entire area)

Does anyone have an idea how to go about coding this type of style. I tried the background image and the borders for the rest and tried to use the z-index (dropdown menu under the parent navigator), but it gets very dirty very quickly. I'm looking for a clean way to code this in CSS, any ideas would be extremely helpful. Thanks!

CSS dropdown

+4
source share
2 answers

I would do this with some positioning absolute , border and :hover .

HTML example:

 <div class="top"> Technology <div> Extra options </div> </div>​

CSS example:

 .top { background: grey; border: 1px solid purple; position: relative; } .top > div { background: grey; border: 1px solid purple; position: absolute; left: -1px; /* or whatever works for your layout */ top: 28px; /* or whatever works for your layout */ z-index: -1; display: none; } .top:hover { border-bottom: 0; } .top:hover > div { display: block; }

Here is a fiddle for you with even more style.

+1
source

Something like that?

 <div id="technology">Technology</div> #technology:hover { border-top:1px solid blue; border-left:1px solid blue; border-right:1px solid blue; } #dropdown { border:1px solid blue; }
0
source

More articles:


All Articles