Как удалить границу справа для последнего дочернего элемента списка при использовании нескольких неупорядоченных списков

Question

Я хочу удалить последний дочерний элемент border-right для списка элементов следующим образом, я попытался с разными типами удалить он, но не работает для этого, любезно помогите мне решить это.

<header> 
    <div id="tag" > 
    <ul id="menu-item" class="nav"> 
     <li id="item-1" class="item-type"> <a href="index.html"> Home </a</li> 
     <li id="item-2" class="item-type"> <a href="about.html"> About Me </a></li> 
     <li id="item-3" class="item-type"> <a href="contact.html"> Contact </a> </li> 
     <li id="item-4" class="item-type"> <a href="map.html"> Map </a> </li> 
    </ul> 
</div> 
<div id="head"> 
    <ul id="ul-head"> 
     <li id="head-1" > <a href="/"> <img id="profile" src="Images/display.jpg" alt="profile" width="80px" height="80px" /> </a> </li> 
     <li id="head-2" class="head-item"> TECHNOLOGIES </li> 
     <li id="head-3" class="head-item"> RESUME </li> 
     <li id="head-4" class="head-item"> FUTURE SCOPE </li> 
     <li id="head-5" class="head-item"> INTEREST </li> 
    </ul> 
    </div> 
</header> 

Applied CSS следующим образом:

#menu-item { 
    position: absolute; 
    display: block; 
    list-style-type: none; 
    float: right; 
    left: 850px; 
    padding: 9px 10px 9px 10px; 
    text-align: center; 
    margin: 0px 
} 
#menu-item > li { 
    float: left; 
    display: inline; 
    border-left: 1px solid #fff ; 
     padding: 1px 15px 1px 15px; 
    } 
.item-type a { 
     color: #FFFFFF; 
     text-decoration: none; 
    } 

#head #ul-head #head-1 a #profile { 
     position: absolute; 
     border-radius: 50%; 
     display: inline; 
     left: 140px; 
     top: 0px 
    } 

.head-item { 
     position: relative; 
     font-size: 16px; 
     font-family: Arial; 
     font-weight: bold; 
     left: 230px; 
     top: 15px; 
     color: #778899; 
     } 
#ul-head > li { 
      float: left; 
      display: inline; 
      border-right: 1px solid #000000; 
      padding: 1px 25px 1px 25px; 
      text-align: center; 
    } 
#tag #menu-item li:first-child a { 
     border-left: none; 
    } 
#head #ul-head li:last-child a { 
     border-right: none; 
    } 

Answer 1

Вы не имеете <a> тег в # уль-головы список

так что вы должны изменить свой код на этот:

#head #ul-head li:last-child{ 
     border-right: none; 
    } 

и по вопросам, связанным со списком # меню пункт граница используется на Li тег, чтобы ваш код CSS должен выглядеть так:

#tag #menu-item li:first-child{ 
     border-left: none; 
    }