I am trying to create a box that has a 'highlight' down the sides of it, and at the top.The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...I have tried a lot of things, not sure if they will help but here is my most recent:\[code\]/* Define the Main Navigation Drop Downs */#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}\[/code\]Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!Here is the current HTML (probably needs to be restructured):\[code\]<div id="dd_foo" class="dd"> <nav> <a href="http://stackoverflow.com//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a> </nav></div>\[/code\]Here is a possible restructure (something like):\[code\]<div id="dd_foo" class="dd"> <div class="handle"><!-- Dropdown Handle --></div> <nav> <a href="http://stackoverflow.com//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a> </nav></div>\[/code\]This is what I need the box to look like (notice the faint white border at the top and half way down the sides):I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?