My task is to replicate this menu:
I'm having trouble creating the gradient. Completed
Why can't I see it in my code? http://jsfiddle.net/Vtr6d/
Here's what I currently have:
CSS:
.mainOptions{
float:left;
margin:0 20px 0 20px;
color:#fff;
width:500px;
height:50px;
background:gray;
}
.mainOptions .composer{
width:50px;
height:40px;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#184C82), to(#022243));
}
.mainOptions .composerIcon{
display:inline-block;
width:14px;
height:14px;
background:url('../images/composer.png') no-repeat -96px -72px;
}
.mainOptions ul li{
display:inline-block;
padding:4px 10px 4px;
border-radius:4px;
}
.mainOptions li a{
text-decoration:none;
font-size:13px;
line-height:18px;
text-align:center;
vertical-align:middle;
}
.mainOptions li{
width:140px;
background-color:pink;
}
HTML:
<nav class="mainOptions">
<ul>
<li class="composerIcon composer"><a href="#" style="margin-top: 2px; padding-top: 5px; padding-bottom: 5px;">Composer</a></li>
<li><a href="#">Address Books</a></li>
<li class="active"><a href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
<li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
</ul>
</nav>