Aqui esta el codigo del CSS
Código:
Aqui esta un grafico de como se ve/*==== TYPOGRAPHY ====*/ h1, h2, h3, h4, h5, h6, legend { margin-top: 0; } h1, legend { text-transform: lowercase; color: #fff; font-family: 'trajan-pro-3', sans-serif; font-size: 28px; font-weight: 300; border-bottom: 1px solid #363637; padding: 0 0 19px; margin-bottom: 15px; } h2 { text-transform: lowercase; color: #fff; /* font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 300; border-bottom: 1px solid #2b2b2c; padding: 0 0 19px; margin-bottom: 15px; }*/ font-family: 'trajan-pro-3', sans-serif; font-size: 26px; font-weight: 300; border-bottom: 1px solid #2b2b2c; padding: 0 0 19px; margin-bottom: 15px; } h3 { text-transform: uppercase; color: #c4c4c4; font-size: 13px; line-height: inherit; font-weight: normal; margin-bottom: 10px; } h3 a { color: inherit; } h3 a:hover { color: #fff; } h4 { text-transform: uppercase; font-size: 12px; line-height: 15px; font-weight: normal; color: #5e5e5e; } h4 a { color: inherit; } h4 a:hover { color: #a7a7a7; } p { margin-bottom: 18px; } .icons-marker { font-size: 13.2px; line-height: 18px; } /*Lists*/ ul.categories-module h5 { font-size: 1em; line-height: inherit; font-weight: normal; margin: 0; } body { text-transform: uppercase; } .clr { clear: both; } /*======================= HEADER =======================*/ /*======================= NAVIGATION =======================*/ #navigation-row { width: 223px; float: left; } .select-menu { display: none; } .body__splash ul.sf-menu { display: none; } .body__splash .menu_button { cursor: pointer; } .navigation .menu_button { background: url(../images/menu_button_bg.png); text-align: right; color: #ffffff; font-size: 13px; text-transform: lowercase; font-family: 'trajan-pro-3', sans-serif; height: 41px; padding-right: 18px; line-height: 32px; position: relative; z-index: 2; margin-bottom: -5px; } .navigation ul.sf-menu { position: relative; /*SubMenu Styles*/ /*Define 1st SubMenu position*/ /*Define SubMenu position*/ /*Define 2nd+ SubMenu position*/ } .navigation ul.sf-menu > li { float: none; padding: 0; height: 47px; } .navigation ul.sf-menu > li.active > a, .navigation ul.sf-menu > li.sfHover > a, .navigation ul.sf-menu > li.current > a, .navigation ul.sf-menu > li.active > span, .navigation ul.sf-menu > li.sfHover > span, .navigation ul.sf-menu > li.current > span { background: #ffffff; color: #ffffff; } .navigation ul.sf-menu > li.active > a:before, .navigation ul.sf-menu > li.sfHover > a:before, .navigation ul.sf-menu > li.current > a:before, .navigation ul.sf-menu > li.active > span:before, .navigation ul.sf-menu > li.sfHover > span:before, .navigation ul.sf-menu > li.current > span:before { opacity: 1; filter: alpha(opacity=100); } /* BORDE IZQUIERDO MENU */ .navigation ul.sf-menu > li.active > a:after, .navigation ul.sf-menu > li.sfHover > a:after, .navigation ul.sf-menu > li.current > a:after, .navigation ul.sf-menu > li.active > span:after, .navigation ul.sf-menu > li.sfHover > span:after, .navigation ul.sf-menu > li.current > span:after { border-left: 4px solid #006dac; } .navigation ul.sf-menu > li > a, .navigation ul.sf-menu > li > span { font-size: 13px; line-height: 40px; font-family: 'trajan-pro-3', sans-serif; text-align: center; color: #ffffff; height: 47px; display: block; /* padding: 0 0 0 61px; */ text-transform: uppercase; } .navigation ul.sf-menu > li > a > em, .navigation ul.sf-menu > li > span > em { font-style: normal; } .navigation ul.sf-menu > li > a > i, .navigation ul.sf-menu > li > span > i { font-style: normal; margin-right: 8px; } .navigation ul.sf-menu > li > a.home, .navigation ul.sf-menu > li > span.home { background: #2f2d2b; } .navigation ul.sf-menu > li > a.home > i, .navigation ul.sf-menu > li > span.home > i { color: #4A4947; } .navigation ul.sf-menu > li > a.bio, /* About */ .navigation ul.sf-menu > li > span.bio { background: #2f2d2b; } .navigation ul.sf-menu > li > a.bio > i, .navigation ul.sf-menu > li > span.bio > i { color: #4A4947; } .navigation ul.sf-menu > li > a.portfolio, /* Models */ .navigation ul.sf-menu > li > span.portfolio { background: #2f2d2b; } .navigation ul.sf-menu > li > a.portfolio > i, .navigation ul.sf-menu > li > span.portfolio > i { color: #4A4947; } .navigation ul.sf-menu > li > a.blog, /* Photo Gallery */ .navigation ul.sf-menu > li > span.blog { background: #2f2d2b; } .navigation ul.sf-menu > li > a.blog > i, .navigation ul.sf-menu > li > span.blog > i { color: #4A4947; } .navigation ul.sf-menu > li > a.contacts, /* Events & News */ .navigation ul.sf-menu > li > span.contacts { background: #2f2d2b; } .navigation ul.sf-menu > li > a.contacts > i, .navigation ul.sf-menu > li > span.contacts > i { color: #4A4947; } /*Menu Test*/ .navigation ul.sf-menu > li > a.test1, /* Contact */ .navigation ul.sf-menu > li > span.test1 { background: #2f2d2b; } .navigation ul.sf-menu > li > a.test1 > i, .navigation ul.sf-menu > li > span.test1 > i { color: #4A4947; } .navigation ul.sf-menu > li > a.test2, /* Find a Distribuitor */ .navigation ul.sf-menu > li > span.test2 { background: #2f2d2b; } .navigation ul.sf-menu > li > a.test2 > i, .navigation ul.sf-menu > li > span.test2 > i { color: #4A4947; } .navigation ul.sf-menu > li > a.test3, /* Owner Forum */ .navigation ul.sf-menu > li > span.test1 { background: #2f2d2b; } .navigation ul.sf-menu > li > a.test3 > i, .navigation ul.sf-menu > li > span.test1 > i { color: #4A4947; } /*END Menu Test*/ .navigation ul.sf-menu > li > a:before, .navigation ul.sf-menu > li > span:before { position: absolute; left: 0; width: 7px; height: 100%; top: 0; content: ''; background: #006dac; opacity: 0.16; filter: alpha(opacity=16); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navigation ul.sf-menu > li > a:after, .navigation ul.sf-menu > li > span:after { position: absolute; content: ''; border-left: 4px solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent; left: 7px; top: 50%; margin-top: -4px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navigation ul.sf-menu > li > a:hover, .navigation ul.sf-menu > li > span:hover { color: #ffffff; } .navigation ul.sf-menu > li > a:hover > span, .navigation ul.sf-menu > li > span:hover > span { background-position: center bottom !important; } .navigation ul.sf-menu > li > a:hover:before, .navigation ul.sf-menu > li > span:hover:before { opacity: 1; filter: alpha(opacity=100); } .navigation ul.sf-menu > li > a:hover:after, .navigation ul.sf-menu > li > span:hover:after { border-left: 4px solid #006dac; } .navigation ul.sf-menu li:hover > ul, .navigation ul.sf-menu li.sfHover > ul { top: 0; left: 100%; } .navigation ul.sf-menu li li:hover ul, .navigation ul.sf-menu li li.sfHover ul { top: -19px; left: 136px; } .navigation ul.sf-menu li li li:hover ul, .navigation ul.sf-menu li li li.sfHover ul { top: -19px; left: 136px; } .navigation ul.sf-menu ul { background: #fafafa; padding: 19px 0; width: 130px; } .navigation ul.sf-menu ul:before { position: absolute; content: ''; top: 18px; left: -6px; border-right: 6px solid #fafafa; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-top: 6px solid rgba(250, 250, 250, 0); border-bottom: 6px solid rgba(250, 250, 250, 0); } .navigation ul.sf-menu ul li { margin: 0 0 1px 0; } .navigation ul.sf-menu ul li a, .navigation ul.sf-menu ul li span { font-size: 15px; line-height: 24px; font-family: 'trajan-pro-3', sans-serif; color: #161616; text-transform: uppercase; display: block; padding: 0 20px; font-weight: 300; text-decoration: none; } .navigation ul.sf-menu ul li a:hover, .navigation ul.sf-menu ul li span:hover { color: #6c6c6c; } .navigation ul.sf-menu ul li.active > a, .navigation ul.sf-menu ul li.sfHover > a, .navigation ul.sf-menu ul li.active > span, .navigation ul.sf-menu ul li.sfHover > span { color: #6c6c6c; } .navigation ul.sf-menu ul li.firstItem { border: none; } .navigation ul.sf-menu.sf-vertical { width: 130px; /*Define 1st SubMenu position*/ } .navigation ul.sf-menu.sf-vertical li { width: 130px; margin-bottom: 1px; } .navigation ul.sf-menu.sf-vertical li:hover > ul, .navigation ul.sf-menu.sf-vertical li.sfHover > ul { top: -13px; } .navigation ul.sf-menu.sf-vertical ul { left: 132px; } .navigation ul.sf-menu.sf-vertical ul li a, .navigation ul.sf-menu.sf-vertical ul li span { padding: 9px 12px; } .navigation ul.sf-menu.sf-navbar { height: 47px; padding-bottom: 47px; margin-bottom: 2px; /*Define 1st SubMenu position*/ } .navigation ul.sf-menu.sf-navbar li:hover > ul, .navigation ul.sf-menu.sf-navbar li.sfHover > ul { top: 49px; left: 0; } .navigation ul.sf-menu.sf-navbar li ul { width: auto; padding: 2px 0; } .navigation ul.sf-menu.sf-navbar li ul ul.sub-menu { width: 130px; top: 47px; }