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!
For id you need to make css like this:
noticed the difference? the #last is combined with the a.