Как изменить один элемент li в меню с помощью списков?

Question

Я создал навигационную панель для своего веб-сайта, используя встроенный список, а затем был создан. Каждый <li> точно такой же, но я хочу, чтобы последний имел другой размер, поскольку я хочу изменить ширину и отступы.

Я понятия не имею, как я могу это сделать, я пробовал несколько способов, но испытал много проблем на этом пути. Я попробовал добавить стиль в теге <li> на HTML-странице, но он ничего не изменил, я тогда попытался использовать селектор последнего ребенка, который работал до некоторой степени. Это позволило мне изменить прописку, но не ширину. Но это не просто изменило его для последнего, но и первое.

CSS:

.dropdown{ 
position: relative; 
margin: 0 auto; 
float: right; 
top: 20px; 
font-size: 13px; 
} 

.dropdown li { 
float: left; 
width: 155px; 
background-color:#373737; 
position: relative; 
border-bottom:1px solid #575757; 
border-top:1px solid #797979; 
} 

.dropdown li a { 
display: block; 
padding: 10px 8px; 
color: #fff;  
position: relative; 
z-index: 2000; 
text-align:center; 
} 

.dropdown li a:hover, 
.dropdown li a.hover{ 
background: #CF5C3F; 
position: relative; 
} 

.dropdown :last-child li a{ 
padding: 0px; 
width: 40px; 
} 

HTML

<ul class="dropdown"> 
     <li><a id="page1" href="index.html">Home</a></li> 
     <li><a href="#">Internet Architecture</a> 
      <ul class="sub_menu"> 
       <li><a href="pages/page2.html">Item Two</a></li> 
       <li><a href="pages/page3.html">Item Three</a></li> 
       <li><a href="pages/page8.html">Item Four</a></li> 
       <li><a href="pages/page9.html">Item Four</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Internet Security</a> 
      <ul class="sub_menu"> 
       <li><a href="pages/page11.html">Laws</a></li> 
       <li><a href="pages/page10.html">Security Risks</a></li> 
      </ul> 
     <li><a href="#">Internet Security</a> 
      <ul class="sub_menu"> 
       <li><a href="pages/page11.html">Laws</a></li> 
       <li><a href="pages/page10.html">Security Risks</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item One</a> 
      <ul class="sub_menu"> 
       <li><a href="#">Item Two</a></li> 
       <li><a href="#">Item Three</a></li> 
       <li><a href="#">Item Four</a></li> 
      </ul> 
     </li> 
     <li><a href="pages/contact.html"><img src="images/contact_white.png" width="30px" height="auto"></a></li> 

</ul> 

Кто-нибудь есть какие-либо идеи о том, как это исправить?

Answer 1

Я хочу, чтобы последний имел другой размер, так как я хочу изменить ширину и длину его.

Так что, если вы имели в виду последнего ребенка уровня 1, чем использовать

ul.dropdown > li:last-child { 
    /* Target */ 
} 

А если вы имели в виду каждыйпоследний ребенок из li на 2-ом уровне ul, чем использовать

ul.dropdown > li > ul > li:last-child { 
    /* Target */ 
} 

Demo

Demo(всего несколько элементов, ничего фантазии)

Answer 2

Я может быть что-то отсутствует, но если я правильно понял ваш вопрос прямо не так просто, как давая <li> вы хотите быть нечетным один из id, а затем с помощью css изменить li#myId ..