CODEWITHSUNDEEP
htmlcsswebmenuborder
TheMetalMonster
TheMetalMonster

Reputation: 13

Border bottom to link in menu on hover when having border bottom to the whole menu div

So I am making a menu, but I have encountered the problem of having a menu with a border bottom and links, which on hover have border bottom on the same line as the border of the menu. I have drawn a sample image to help you.

Since I don't have enough reputation click on the link to view the image. --> http://ctrlv.in/478501 <--

No need to add special effects like colors or movement, just the border. Please help

Upvotes: 0

Views: 399

Answers (1)

jmore009
jmore009

Reputation: 12923

Is this what you are looking for?

HTML

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

CSS

li{
  list-style-type: none;
  background: #f5f5f5;
  float: left;
  padding: 8px 15px;
  border-bottom: 2px solid #CCC;
}

li:hover{
  border-bottom: 2px solid red;
}

FIDDLE

UPDATE

NEW FIDDLE

NEW UPDATE

THIRD FIDDLE

Upvotes: 1

Related Questions