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

I created a navigation bar at for my website using an in-line list and then it has been styled. Each <li> is exactly the same but I want the last one to have a different size as i wish to change the width and padding of it.

I have no idea how I am able to do this, I've tried multiple ways but experienced lots of problems along the way. I tried adding styling in the <li> tag on the HTML page, but it changed absolutely nothing, I then tried using the last-child selector which worked to an extent. It allowed me to change the padding of it but not width. But it didn't just change it for the last one but also the 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 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>

Does anyone have any idea on how to fix this?

Answers


I want the last one to have a different size as i wish to change the width and padding of it.

So if you meant last child of level 1 than use

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

And if you meant each last child of li on 2nd level ul, than use

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

Demo

Demo (Just more elements, nothing fancy)


I may be missing something here, but if I understand your question right it's as simple as giving the <li> you want to be the odd one out an id, and then using css to change li#myId..


Need Your Help

PHP Rest api security

java php api security

We are currently working on a game in java.

Instruments application can't open tracetemplate file

ios macos instruments

When I open "Instruments" application and try choose any template for my simulator (Time Profiler or any other) I get "Import Trace" window with all possible tracetemplates files from '/Applications/