Lower bound on li

Question

I am trying to add a lower border to my li elements. This is my css:

.menu{ text-align:right; } .menu li{ padding:5px; text-transform: uppercase; display:inline; list-style-type:none; list-style-position: inside; border-bottom: 1px solid red; } 

And my HTML:

  <div class="menu"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> <li>Testimonials</li> <li>About Us</li> <li>Contact Us</li> </ul> </div> 

For some reason, no lower bound is added. I can add a border to the right and left, but not from the bottom. What am I doing wrong?

Answer 1

try adding;

 html, body{ margin: 0; padding: 0; } 

Your code works fine here without any changes.

Answer 2

I clearly understand your need. The solutions are given below by simply changing the lower right. Please check and give feedback.

 .menu li{ padding:5px; text-transform: uppercase; display:inline; list-style-type:none; list-style-position: inside; border-right: 1px solid red; }