0

i am having left navigation in my web page See the attached pic to get better idea of what i have in design

enter image description here

as shown in pic i have 15px padding on both sides of navigation but problem is that when i hover over any of element in navigation its background color should be set to dark grey to the full width means 15 px padding on both sides must be eliminated on hover state and background color

i really cant get how to solve this problem on hover state i can add this

.nav > li > a:hover { background-color: #f18c2e;
  }

but how do i show it full width background color as per given Pic ?

2 Answers 2

1

You can set the box-shadow to cover the left and right side (15px offset):

nav li:hover {
  background:gray;
  cursor:default;
  box-shadow: 15px 0 0 gray, -15px 0 0 gray;
}

Demo.

Sign up to request clarification or add additional context in comments.

Comments

0

Try something like this: http://jsbin.com/vebopu/2/

Considering the following CSS:

/* Your 15px padding */
.nav > li {
  padding: 15px;
}

/* Where you set the initial stuff */
.nav > li > a { 
  background-color: #111; 
  color: #fff;
  display:inline-block;
}

/* You want to remove the padding on li hover */
.nav > li:hover {
  padding: 0;
}

/* But you still want the resulting size to keep the padding */
.nav > li:hover a {
  background-color: #f00;
  padding: 15px;
}

1 Comment

that is not working as padding is applied to its parent container

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.