MENU EXAMPLES 1

Wednesday, 25 December 2013

MENU EXAMPLES 1

<html>
<head>
<style type="text/css">
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-primary-container{padding:12px 0 0 0;position:relative;height:38px;z-index:400;float:left}
.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#555454;padding:12px 15px;text-decoration:none;text-transform:uppercase;font:normal 11px Arial,Helvetica,Sans-serif}
.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#017DB0;outline:0}
.menu-primary li li a{color:#fff;text-transform:none;background:#017DB0;padding:10px 15px;margin:0;border:0;font-weight:normal}
.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover > a,.menu-primary li li.current-cat > a,.menu-primary li li.current_page_item > a,.menu-primary li li.current-menu-item > a{color:#fff;background:#2291BF;outline:0;border-bottom:0;text-decoration:none}
.menu-primary a.sf-with-ul{padding-right:20px;min-width:1px}
.menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:11px 10px 0 0}
.menu-primary li li .sf-sub-indicator{padding:9px 10px 0 0}
.wrap-menu-primary .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdFJ5veQNRcgVFKeUj7VYpp0LqfL2VVf0efkhEGukQRW3YpmfQarwZYMd7bN7GMLlzLLuL3QjG_eAZl8kytroc17mz1NT_TJNaeqMQjVf94vgcIcR9A-dACTZvkfnLtQk5M-2HmT0EsD6/s0/menu-primary-shadow.png') no-repeat bottom right}
.menu-secondary-container{position:relative;height:36px;z-index:300;padding-left:12px;background:url(https://lh5.googleusercontent.com/-lwiuhPqB03I/USHXWL-HzOI/AAAAAAAAErM/2BAEOWMxCSg/s172/menu-secondary-bg-1.png) left top repeat-x;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;border:1px solid #2092C0}

.menu-secondary-container a:hover{position:relative;height:13px;z-index:300;padding-left:12px;background:url(https://lh5.googleusercontent.com/-XICMiEP4Mfc/USHwN1-I4pI/AAAAAAAAErc/gfxDNFNsXFc/s172/menu-secondary-bg-1.png) left top repeat-x;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1px solid #fff}

.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:12px 15px 10px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-s#000econdary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(https://lh3.googleusercontent.com/-Ol4OU70ee9U/USHWpEDBIuI/AAAAAAAAErA/pkVEq9LkGlg/s172/bg-2.png) left -136px repeat-x;outline:0}
.menu-secondary li li a{color:#FFF;background:#000;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#FFF;background:#26ABE3;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
.wrap-menu-secondary .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfEzHJDZPNjIhnoduwt-8d2_PgHUGNcuFUAbzaHf7f5mu8POv-vzy82YzIJEECMCtsSSv6VvA6swPEO-wXAOUamH4LbcOfdXSE2-EWe-f6EoHOD-ZJZwRg_asSHO7vfiSZ6jcRGdgMucTh/s0/menu-secondary-shadow.png') no-repeat bottom right}
</style>

</head>

<body>

<li><a href=''>Social</a>

<li><a href=''>Facebook</a></li>

<li><a href=''>Twitter</a></li>

<li><a href=''>Google Plus</a></li>

</ul>

</li>

<li><a href=''>Blogger Widgets</a>

<li><a href=''>Labels</a></li>

<li><a href=''>Translator</a></li>

<li><a href=''>Subscribe</a>