Top Menu

by XcsN

HTML

<div class="wrapper">

    <ul id="navigation">
        <li><a href="#">Apps</a></li>
        <li><a href="#">Create</a></li>
        <li><a href="#">Edit</a></li>
        <li class="icon"><a href="#">Apps</a></li>
        <li><a href="#">Create</a></li>
        <li><a href="#">Edit</a></li>

    </ul>
    
</div>

CSS

*{
	padding:0;
	margin:0;
	}
body {
	font:normal 12px/18px Arial, Helvetica, sans-serif;
	color:#000;
	padding:20px;
	background-color:#F2F2F2;
	}
ul, li, ol {
	list-style-type:none;
	}

.wrapper {
    width:940px;
    padding:10px;
    overflow:hidden;
	height:100%;
	margin:0 auto;
	border:1px  solid green;
	background-color:#3D3A40;
	border:8px solid #fff;
}
.spacer {
	clear:both;
	font-size:0;
	line-height:0;
	height:0;
	}
p {
	padding-bottom:18px;
	}

#navigation{
    background:#efefef;
    height:40px;
	font-size:14px;
	line-height:40px;
}
#navigation li {
	float:left;
	
	}
#navigation li a{
	padding:0 19px;
	display:block;
	text-align:center;
	color:#35B4DE;
	text-decoration:none;
    float:left;
}
#navigation li a:hover,
#navigation li a.active {
	 background:#35B4DE;
	color:#fff;
	}
#navigation li span {
	width:15px;
	height:15px;
	background-color:#FF0000;
	margin:13px  0 0 10px;
	display:block;
	float:right;
	}
#navigation li i.arrow {
	line-height:40px;
	color:#fff;
	background-color:#35B4DE;
	display:block;
	float:right;
	padding:0 5px;
	}
#navigation li i.arrow a {
	padding:0;
	color:#fff;
	background-color:#35B4DE;
	}

JavaScript

$(document).ready(function(){
		$("#navigation li.icon a").append("<span></span>");
		$("#navigation li:last").append("<i class='arrow'><a href='#'>&raquo;</a></i>");
	});