user1573618 user1573618 - 1 year ago 80
CSS Question

CSS - background-color including margin

I am trying to create a horizontal navigation menu. The menu needs to be full screen width, with a border bottom running the whole width too. I have more or less acheived this apart from I would like to have a margin of about 15px under the menu, and for this to use the background color of my menu. Also when an item is hovered, the hover color should extend under the border too if that makes sense.

Here is a fiddle of my menu so far -

Tried to insert my code here but the li items got converted to bullets

I have set a margin under the container nav, and I would like the border color to be used on the margin area too. I would also like to somehow have the li items hover color to extend under the border too but I have no idea how this might be acheived. If I put the margin and border on the li items the border won't run the full width of the screen.


Updated my fiddle to include a mock-up of what I want to acheive -

I can't use padding as that pushes the border-bottom down, and I want to have a border with background-color underneath it.

Answer Source

I hope you are looking for this: DEMO


.nav-menu:after {

You can use after and before pseudo classes for your desired result.