Telunjuk.com header menu

Menu navigasi di atas

by xaliber

HTML

<header id="header_pat1" role="banner">
    <ul id="menu_pat">
		<li><a href="#">Mom and Baby</a>
            <div>
                <a href="" class="main-cat-title">Lihat Semua Mom and Baby &raquo;</a> <em>atau lihat berdasarkan tema:</em>
                <fieldset><legend>Tema 1</legend>
                    <ul>
                        <li><a href="/all/jual/_:_tema_sd:mom_and_baby"><strong>Semua Produk</strong></a></li>
                        <li><a href="/pakaian/jual/_:_tema_sd:mom_and_baby"><strong>Pakaian</strong></a></li>
                        <li><a href="/susu/jual/_:_tema_sd:mom_and_baby"><strong>Susu</strong></a></li>
                        <li><a href="/botol_susu/jual/_:_tema_sd:mom_and_baby"><strong>Botol Susu</strong></a></li>
                    </ul>
                </fieldset>
                <fieldset><legend>Tema 2</legend>
                    <ul>
                        <li><a href="/all/jual/_:_tema_sd:mom_and_baby"><strong>Semua Produk</strong></a></li>
                        <li><a href="/pakaian/jual/_:_tema_sd:mom_and_baby"><strong>Popok</strong></a></li>
                        <li><a href="/susu/jual/_:_tema_sd:mom_and_baby"><strong>Bonus</strong></a></li>
                        <li><a href="/botol_susu/jual/_:_tema_sd:mom_and_baby"><strong>Bola</strong></a></li>
                    </ul>
                </fieldset>
            </div>
        </li>
            
            
        <li><a href="#">Mom and Baby</a>
            <div>
		    <ul>
				<li><a href="/all/jual/_:_tema_sd:mom_and_baby"><strong>Semua Produk</strong></a></li>
				<li><a href="/pakaian/jual/_:_tema_sd:mom_and_baby"><strong>Pakaian</strong></a></li>
				<li><a href="/susu/jual/_:_tema_sd:mom_and_baby"><strong>Susu</strong></a></li>
				<li><a href="/botol_susu/jual/_:_tema_sd:mom_and_baby"><strong>Botol Susu</strong></a></li>
            </ul>
            </div>
        </li>
        
        
        <li><a href="#">Mom and Baby</a>
            <div>
		   ...

CSS

#header_pat1 {
	background: #e5191a;
	border-bottom: 5px solid #d2d2d2;
	width: 100%;
}


/* Main */
#menu_pat {
	margin: 0;
	list-style: none;
	background: none;
	display: inline-block;
	margin-top: 10px;
	margin-left: 30px;position: relative;
}

#menu_pat li {
	display: inline-block;
	padding: 0 0 10px 10px;	
}

#menu_pat li > a {
	text-transform: uppercase;
}

#menu_pat a {
	float: left;
	height: 25px;
	padding: 0 10px;
	color: #fff;
	font: bold 12px/25px "Trebuchet", Arial, Helvetica;
	text-decoration: none;
}

#menu_pat li:hover > a {
	color: #EBB8B8;
}

#menu_pat > li:hover > a:before {
	content: '';
	position: relative;
    left: 0;
    bottom: -7px;
    margin-right:-10px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #FF2C2F;
}

*html #menu_pat li a:hover {/* IE6 */
	color: #d2d2d2;
}

#menu_pat li:hover > div {
	display: block;
}

/* Sub-menu */

#menu_pat li > div {    
	display: none;
	position: absolute;
	top: 35px;
	left: 0;
	z-index: 99999;
    width:92%;
    padding:4%;
    background: #FF2C2F; /*8e5191a; */
    color:#fff;
	font: 12px/25px "Trebuchet", Arial, Helvetica;
    box-shadow: 0px 4px 2px #aaa;
}

#menu_pat a.main-cat-title {
	float: none;
    font-size: 14px;
    padding: 0;
}
#menu_pat a.main-cat-title:hover {
    color:#d2d2d2;
}
#menu_pat em {
    display: block;
    line-height: 100%;
}
#menu_pat fieldset {
    padding:4px;
    margin: 18px 0 0 0;
    border:0;
    display: inline-block;
    width: 30%;
}
#menu_pat legend {
    font-weight: bold;
    font-size: 14px;
    margin-left:-2px;
}
#menu_pat ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu_pat ul li {
	float: none;
	margin: 0;
	padding: 0;
	display: block;
}

#menu_pat ul a {
	padding: 4px 0 10px;
	height: auto;
	line-height: 1;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
    font-weight:normal;
}

*html #menu_pat ul a {/* IE6 */
	height: 10px;
	width:...