Is there a way to have CSS borders outside the box(div)? Or alternative solution

I have this menu here

I want the highlighting(hover) to extend to the edge of the outside box(service menu). Just like how the popout menu is. The menu itself is contained in another div -

I don't think it is possible to have negative borders the same way you can have negative padding.

Anyone have a good idea on how to get the highlight of the menu to ext开发者_运维技巧end to the edge of the outside box on hover?

This is Drupal w/ Nice Menu by the way.

Looks like a margin issue, trying changing the margin to padding, should work almost exactly the same and go to the edge.

EDIT Or set the width of the out div to be the same as the inner div.

You should use box-sizing property:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

This will make the border and padding fit inside the elements dimensions as opposed to outside.

use Combination of CSS BOX model with outline.

margin:

padding:
border: line-size style color;
outline:line-size style color;
box-sizing:border-box (webkit);

example:

padding:2px;
margin:0;
border: 1px solid grey;
outline: 1px solid grey;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */