<header>
<header> <nav> <ul><li><a id="menu" href="#">Menu<img src="http://i.imgur.com/NQXMYIU.png" title="Hosted by imgur.com" /></a></li>
<span id="opcoes">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</span> </ul> </nav></header><script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
body {
body {background-color: #e5e5e5;
font-family: helvetica;
font-size: 13px;
}
header nav ul {
float: left;
padding: 20px 0 0 0;
}
header nav ul li {
text-align: right;
/*float: left; /* makes list horizontal */list-style-type: none;
margin: 0 0 20px 30px; /* separates 'buttons'*/
width: 100px;
}
header nav ul li a {
padding: 10px 25px 10px 15px; /* makes target area bigger */
color: #333; /* rgba backup */
/*color: rgba(255,255,255, 0.8);*/text-decoration: none;
font-weight: bold;
/*text-shadow: 0 1px 1px rgba(0,0,0, 0.3);*/ /* -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; -o-transition: all 0.75s ease-in-out; transition: all 0.75s ease-in-out; */}
header nav ul li a {
position: relative;
}
header nav ul li a img {
position: absolute;
right: 5px;
top: 8px;
}
header nav ul li a:hover, header nav ul li a:focus {
/*color: #fff;*/background: #fff; /* rgba backup */
background: rgba(255,255,255, 0.9);
border-radius: 4px; /* safari & chrome */
border-radius: 4px; /* firefox */
border-radius: 4px; /* futureproof */
}
$("#menu").click(function () {
$("#menu").click(function () {
$("#opcoes").slideToggle("");
});