How can I remove the last divider in menu?

Can you help me please on my css,How can I remove the last divider on my menu.

<div  id ="navmenu">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About Us</a></li>
                      <li><a href="#">Profile</a></li>
                      <li><a href="#">Gallary</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Inform</a></li>
                      <li><a href="#">Contact Us</a></li>

And my css

 #navmenu ul{
    list-style-type: none;
    margin: 0px;
    padding: 20px 0px;
    height: auto;


#navmenu ul li {
    display: inline;
    padding: 23px;
    border-right:solid 1px red;

#navmenu ul  li:last{
 border-right: none;

#navmenu ul li a{

   text-decoration: none;
   padding: 8px 8px 8px 8px;

#navmenu ul li a:hover , #navmenu ul li:hover{

Thank you in advance.

#navmenu ul li:last-child { border-right:0;} 

You were close. There is no :last though. It’s last-child.

Thank you so much @RyanReese

Jemz, I posted a solution to this in your other thread.

essentially, move the border to the left and use adjacent selectors. The you won’t need to override the border on the last element

Can you please give me a link to my thread.

Thank you in advance.

@RyanReese, Thank you for the link :smiley:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.