How can I remove the last divider in menu?

HTML & CSS
1

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

<div  id ="navmenu">
               <ul>
                      <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>
               </ul>
   
         </div>

And my css

 #navmenu ul{
    list-style-type: none;
    margin: 0px;
    padding: 20px 0px;
    background-color:#008083;
 
    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;
   color:#fff;
  
}

#navmenu ul li a:hover , #navmenu ul li:hover{
   background-color:#00e7bb;
}

Thank you in advance.

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

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

3

Thank you so much @RyanReese

4

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

5

Can you please give me a link to my thread.

Thank you in advance.

6
7

@RyanReese, Thank you for the link :smiley:

8

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