I'm aiming to design a box with a unique 'highlight' effect along its sides and at the top.
The CSS for creating the box was fairly straightforward, but adding this 'highlight' has made the CSS more complex...
I've experimented with various approaches, although uncertain if they'll be effective. Here's my latest attempt:
/* 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;}
Please bear in mind that I've shared the above code to demonstrate my efforts. It may not serve as a starting point due to potential restructuring required!
Here's the current HTML structure (likely needing revision):
<div id="dd_foo" class="dd">
<nav>
<a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
</nav>
</div>
A possible restructuring could look like this:
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
<a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
</nav>
</div>
This is the desired appearance of the box (noting the faint white border at the top and halfway down the sides):
I have also provided representations of the box broken down into individual elements (handle and background)
I believe it can be achieved using clever overlaps and nested divs, though ideally seeking an alternative solution... Any suggestions?