Reputation: 526

Styling the last <li> <a>

I stucked at this part. I have a menu in HTML like this:

<nav> 
<ul>
                 <li><a href="#">Home</a></li>
                    <li><a href="#">Item1</a>
                        <ul>
                            <li><a href="#">Item1_1</a></li>
                            <li><a href="#">Item1_1</a></li>
                            <li><a href="#">Item1_1</a></li>
                            <li><a href="#">Item1_1</a></li>
                            <li><a id="last" href="#">Last</a></li>
                        </ul>
                    </li>
</ul>
</nav>

The CSS is this:

nav {

margin-left: auto;
margin-right: auto;
width: 100%;    

}

 nav ul ul li a #last {

border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;

}    


nav ul ul {

display: none;

}

nav ul li:hover > ul {

    display: block;
 }

nav ul {    

background: linear-gradient(top, #ffffff 0%, #ffffff 100%);  
background: -moz-linear-gradient(top, #fffff 0%, #fffff 100%); 
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);    
padding: 0px;    
list-style: none;
position: relative;
display: inline-table;
width: 100%;    
text-align: center;

}

nav ul:after {

content: ""; 
clear: both; 
display: block;


}


nav ul li {

width: 20%;
float: left;
text-align: center;


}

nav ul li:hover {

border-top-left-radius: 1em;
border-top-right-radius: 1em;
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);        

}

nav ul li:hover a {

color: #fff;    

}


nav ul li a {

font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
font-weight: bold;
display: block; 
padding: 0.9em;
color: #000000; 
text-decoration: none;    

}


nav ul ul {

width: 20%;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;


}

nav ul ul li {

font-family: Arial,Helvetica,sans-serif;
float: none;
width: 100%;    
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;  

}

nav ul ul li a {

font-family: Arial,Helvetica,sans-serif;
font-size: 0.7em;
width: 89%;
padding: 15px 10px;        

}

nav ul ul li a:hover {

background: #4b545f;

}

As You can see there is an id="last" for the last item at the list, because I want to this item have a rounderd bottom border (left and right side aswell). But I have no idea why its not working :(. Its my first post so sorry for my english, and for the long post aswell :) Plase help me, thank You!

Upvotes: 2