html - how to change single li element in a menu using lists? -


i created navigation bar @ website using in-line list , has been styled. each <li> same want last 1 have different size wish change width , padding of it.

i have no idea how able this, i've tried multiple ways experienced lots of problems along way. tried adding styling in <li> tag on html page, changed absolutely nothing, tried using last-child selector worked extent. allowed me change padding of not width. didn't change last 1 first one.

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 {  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> 

does have idea on how fix this?

i want last 1 have different size wish change width , padding of it.

so if meant last child of level 1 use

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

and if meant each last child of li on 2nd level ul, use

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

demo

demo (just more elements, nothing fancy)


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -