themeforest
Mavi Bir Menü
Mavi Açılır Çok İşlevsel Bir Menü
Ön İzleme
<style type="text/css" media="all">
#block-mega-menu-3 .horizontal .wrapper_menu {
z-index: 40 !important;
}
#block-mega-menu-2 .horizontal .wrapper_menu {
z-index: 30 !important;
}
#block-mega-menu-4 .horizontal .wrapper_menu {
z-index: 20;
}
#block-mega-menu-5 .horizontal .wrapper_menu {
z-index: 10;
}
.horizontal .wrapper_menu {
width: 980px;
margin: 0 auto;
display: block;
position: relative;
}
.horizontal .wrapper_menu .menu {
list-style: none;
width: 940px;
margin: 0 auto;
height: 43px;
padding: 0 20px 0 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.horizontal .wrapper_menu_full {
margin: 0;
position: relative;
z-index: 9999;
}
.horizontal .wrapper_menu_full .menu {
width: 100%;
padding: 0;
height: 43px;
}
.horizontal .wrapper_menu_full .menu_whole_width {
list-style: none;
width: 940px;
margin: 0 auto;
height: 43px;
padding: 0;
}
.horizontal .menu li {
float: left;
text-align: center;
position: relative;
margin-right: 20px;
margin-top: 6px;
border: none;
}
.horizontal .menu .fullwidth {
position: static !important;
}
.horizontal .menu li:hover {
border-bottom: none;
margin-right: 19px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.horizontal .menu li.nodrop:hover {
padding: 4px 10px 4px 9px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.horizontal .menu li.nodrop:hover a {
padding: 0;
}
.horizontal .menu li a {
color: #EEEEEE;
outline: 0;
padding: 5px 10px 3px 10px;
text-decoration: none;
display: block;
text-shadow: 1px 1px 1px #000;
}
.horizontal .menu li:hover a {
text-shadow: none;
position: relative;
z-index: 11;
padding: 4px 9px 4px 9px;
}
.horizontal .menu li:hover div a {
display: inline;
}
.horizontal .menu li .drop, .horizontal .menu li:hover .drop {
padding-right: 27px;
}
.horizontal .menu li.right {
float: right;
right: 0;
margin-right: 0;
}
.horizontal .menu li.right:hover {
margin-right: -1px;
}
.horizontal .menu .dropdown_1column,
.horizontal .menu .dropdown_2columns,
.horizontal .menu .dropdown_3columns,
.horizontal .menu .dropdown_4columns,
.horizontal .menu .dropdown_5columns,
.horizontal .menu .dropdown_fullwidth {
margin: 4px auto;
left: -999em;
position: absolute;
padding: 10px;
text-align: left;
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
.horizontal .menu .dropdown_1column {
width: 145px;
}
.horizontal .menu .dropdown_2columns {
width: 300px;
}
.horizontal .menu .dropdown_3columns {
width: 455px;
}
.horizontal .menu .dropdown_4columns {
width: 610px;
}
.horizontal .menu .dropdown_5columns {
width: 765px;
}
.horizontal .menu .dropdown_fullwidth {
width: 920px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.horizontal .menu li .first_fullwidth {
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
.horizontal .menu li:hover .dropdown_1column,
.horizontal .menu li:hover .dropdown_2columns,
.horizontal .menu li:hover .dropdown_3columns,
.horizontal .menu li:hover .dropdown_4columns,
.horizontal .menu li:hover .dropdown_5columns {
left: -1px;
top: 25px;
}
.horizontal .menu li:hover .dropdown_fullwidth {
left: 21px;
top: 33px;
display: block;
}
.horizontal .wrapper_menu_full .menu li:hover .dropdown_fullwidth {
left: 50%;
margin-left: -470px;
top: 32px;
display: block;
}
.horizontal .menu li .align_right {
-webkit-border-radius: 5px 0 5px 5px;
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.horizontal .menu li:hover .align_right {
left: auto;
right: -1px;
top: 25px;
}
.horizontal .menu li.right:hover .dropdown_fullwidth {
right: 18px;
top: 33px;
}
.horizontal .wrapper_menu_full .menu li.right:hover .dropdown_fullwidth {
left: auto;
right: 50%;
margin-right: -471px;
top: 32px;
}
.horizontal .menu .col_1,
.horizontal .menu .col_2,
.horizontal .menu .col_3,
.horizontal .menu .col_4,
.horizontal .menu .col_5,
.horizontal .menu .col_6 {
float: left;
margin-left: 10px;
}
.horizontal .menu .col_1 {
width: 145px;
}
.horizontal .menu .col_2 {
width: 300px;
}
.horizontal .menu .col_3 {
width: 455px;
}
.horizontal .menu .col_4 {
width: 610px;
}
.horizontal .menu .col_5 {
width: 765px;
}
.horizontal .menu .col_6 {
width: 920px;
}
.horizontal .menu .firstcolumn {
margin-left: 0;
/* Clearing margin & left */
clear: left;
}
.horizontal .menu p,
.horizontal .menu ul,
.horizontal .menu li,
.horizontal .menu h2,
.horizontal .menu h3 {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
line-height: 21px;
text-align: left;
}
.horizontal .menu p {
font-size: 12px;
line-height: 18px;
margin: 0;
margin-bottom: 10px;
text-shadow: 1px 1px #000000;
}
.horizontal .menu .strong {
font-weight: bold;
}
.horizontal .menu .italic {
font-style: italic;
}
.horizontal .menu h2, .horizontal .menu h3 {
text-shadow: 1px 1px #000000;
margin-top: 7px;
}
.horizontal .menu h2 {
font-weight: 400;
font-size: 21px;
margin-bottom: 18px;
padding-bottom: 11px;
}
.horizontal .menu h3 {
font-weight: 600;
font-size: 14px;
margin-bottom: 14px;
padding-bottom: 7px;
}
.horizontal .menu li:hover div a {
text-decoration: none;
text-shadow: none;
border: none;
padding: 0;
}
.horizontal .menu .pusher {
/* Use this pucher if you want to give more vertical spacing between your rows of content */
margin-top: 18px;
}
.horizontal .menu .help,
.horizontal .menu .favorite,
.horizontal .menu .mail,
.horizontal .menu .print {
padding-left: 36px;
margin-bottom: 18px;
}
.horizontal .menu .help {
background: url("http://bs-designs.webuda.com/menu/img/help.png") no-repeat 0 2px;
}
.horizontal .menu .favorite {
background: url("http://bs-designs.webuda.com/menu/img/favorite.png") no-repeat 0 2px;
}
.horizontal .menu .mail {
background: url("http://bs-designs.webuda.com/menu/img/mail.png") no-repeat 0 2px;
}
.horizontal .menu .print {
background: url("http://bs-designs.webuda.com/menu/img/print.png") no-repeat 0 2px;
}
.horizontal .menu .imgshadow_dark, .horizontal .menu .imgshadow_light {
padding: 4px;
margin-top: 5px;
}
.horizontal .menu .img_left {
/* Image sticks to the left */
width: auto;
float: left;
margin: 2px 15px 5px 0;
}
.horizontal .menu .img_right {
/* Image sticks to the right */
width: auto;
float: right;
margin: 2px 0 5px 15px;
}
.horizontal .menu li .black_box, .horizontal .menu li .dark_grey_box {
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding: 4px 6px 4px 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.horizontal .menu li ul {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
}
.horizontal .menu li ul li {
font-size: 12px;
line-height: 24px;
position: relative;
text-shadow: 1px 1px 1px #000000;
padding: 0;
margin: 0;
float: left;
text-align: left;
width: 145px;
}
.horizontal .menu li ul li a {
padding: 0;
}
.horizontal .menu li ul li:hover {
background: none;
border: none;
padding: 0;
margin: 0;
}
.horizontal .menu li .greybox li {
margin: 0 0 4px 0;
padding: 4px 6px 4px 6px;
width: 131px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.horizontal .menu li .greybox li:hover {
padding: 4px 6px 4px 6px;
margin: 0 0 4px 0;
}
.horizontal .menu li .plus li {
margin: 0 0 4px 0;
padding: 0 0 0 21px;
width: 109px;
}
.horizontal .menu li .plus li:hover {
padding: 0 0 0 21px;
margin: 0 0 4px 0;
}
.horizontal .menu li ul.social {
list-style: none;
margin: 0;
padding: 0;
}
.horizontal .menu li ul.social li {
padding-top: 5px;
margin: 0 12px 12px 0;
float: left;
position: relative;
display: inline;
width: 32px;
}
.horizontal .menu li ul.social li img {
border: none;
}
.horizontal .menu li ul.social li:hover {
padding-top: 5px;
margin: -1px 12px 12px 0;
}
.horizontal .menu li ul.social li span {
display: none;
}
.horizontal .menu .levels, .horizontal .menu .levels ul {
padding: 0;
margin: 0;
list-style: none;
}
.horizontal .menu li:hover .levels a {
display: block;
}
.horizontal .menu .levels a {
display: block;
width: 10em;
}
.horizontal .menu .levels li {
float: left;
width: 150px;
}
.horizontal .menu .levels li ul {
position: absolute;
top: -23px;
margin: 15px 0 0 4px;
padding: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
left: -999em;
}
.horizontal .menu .levels li:hover ul ul, .horizontal .menu .levels li:hover ul ul ul {
left: -999em;
}
.horizontal .menu .levels li:hover ul, .horizontal .menu .levels li li:hover ul, .horizontal .menu .levels li li li:hover ul {
left: 142px;
}
.horizontal .contact_form label, .horizontal .contact_form legend {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.horizontal .contact_form legend {
margin-bottom: 10px;
}
.horizontal .contact_form {
display: block;
margin-bottom: 10px;
}
.horizontal .contact_form label {
display: inline-block;
float: left;
height: 36px;
line-height: 36px;
width: 80px;
font-size: 12px;
}
.horizontal .contact_form input, .horizontal .contact_form textarea, .horizontal .contact_form select {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 200px;
padding: 5px;
margin: 7px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.horizontal .contact_form textarea {
resize: none;
}
.horizontal .contact_form .required {
color: #C00;
}
.horizontal .contact_form .form_buttons {
margin: 4px 0 0 80px;
}
.horizontal .contact_form input.button {
width: 80px;
margin-right: 10px;
cursor: pointer;
padding: 4px 7px 4px 7px;
}
.horizontal .contact_form .special {
display: none;
}
.horizontal .contact_form .error, .horizontal .contact_form .sent {
font-size: 11px;
padding: 2px 5px 2px 5px;
text-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.horizontal .contact_form .error {
background: #FBE5E2;
border: #F2A197 solid 1px;
color: #992213;
}
.horizontal .contact_form .sent {
background: #E1F8CB;
border: #C6D880 solid 1px;
color: #37620d;
}
.horizontal .menu_light_theme ul li:hover, .horizontal .menu_light_theme ul li.nodrop:hover {
background: #eeeeee;
border: 1px solid #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#eeeeee));
background: -webkit-linear-gradient(top, #f4f4f4, #eeeeee);
background: -moz-linear-gradient(top, #f4f4f4, #eeeeee);
background: -o-linear-gradient(top, #f4f4f4, #eeeeee);
background: -ms-linear-gradient(top, #f4f4f4, #eeeeee);
background: linear-gradient(top, #f4f4f4, #eeeeee);
}
.horizontal .menu_light_theme ul li:hover a {
color: #161616;
border-bottom: 1px solid #EEEEEE;
}
.horizontal .menu_light_theme ul li .drop, .horizontal .menu_light_theme .menu li.noactive .drop {
background: url("http://bs-designs.webuda.com/menu/img/arrow_down1.png") no-repeat right 13px;
}
.horizontal .menu_light_theme ul li:hover .drop {
background: url("http://bs-designs.webuda.com/menu/img/arrow_down1.png") no-repeat right 12px;
}
.horizontal .menu_light_theme ul .dropdown_1column,
.horizontal .menu_light_theme ul .dropdown_2columns,
.horizontal .menu_light_theme ul .dropdown_3columns,
.horizontal .menu_light_theme ul .dropdown_4columns,
.horizontal .menu_light_theme ul .dropdown_5columns,
.horizontal .menu_light_theme ul .dropdown_fullwidth,
.horizontal .menu_light_theme ul .levels li ul {
background: #eeeeee;
border: 1px solid #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#bbbbbb));
background: -webkit-linear-gradient(top, #eeeeee, #bbbbbb);
background: -moz-linear-gradient(top, #eeeeee, #bbbbbb);
background: -o-linear-gradient(top, #eeeeee, #bbbbbb);
background: -ms-linear-gradient(top, #eeeeee, #bbbbbb);
background: linear-gradient(top, #eeeeee, #bbbbbb);
}
.horizontal .menu_light_theme ul p,
.horizontal .menu_light_theme ul h2,
.horizontal .menu_light_theme ul h3,
.horizontal .menu_light_theme ul li ul li {
text-shadow: 1px 1px 1px #FFFFFF;
}
.horizontal .menu_light_theme ul h2, .horizontal .menu_light_theme ul h3 {
border-bottom: 1px solid #888888;
}
.horizontal .menu_light_theme ul .imgshadow_dark {
/* Better style on dark background */
background: #FFFFFF;
border: 1px solid #333333;
-moz-box-shadow: 0 0 5px #000000;
-webkit-box-shadow: 0 0 5px #000000;
box-shadow: 0 0 5px #000000;
}
.horizontal .menu_light_theme ul .imgshadow_light {
/* Better style on light background */
background: #FFFFFF;
border: 1px solid #777777;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
box-shadow: 0 0 5px #666666;
}
.horizontal .menu_light_theme ul li .black_box {
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
background-color: #333333;
-webkit-box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
box-shadow: inset 0 0 3px #000000;
}
.horizontal .menu_light_theme ul li .dark_grey_box {
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
background-color: #555555;
-webkit-box-shadow: inset 0 0 3px #111111;
-moz-box-shadow: inset 0 0 3px #111111;
box-shadow: inset 0 0 3px #111111;
}
.horizontal .menu_light_theme ul li .greybox li {
background: #F4F4F4;
border: 1px solid #bbbbbb;
}
.horizontal .menu_light_theme ul li .greybox li:hover {
background: #ffffff;
border: 1px solid #aaaaaa;
}
.horizontal .menu_light_theme ul li .plus li {
background: url("http://bs-designs.webuda.com/menu/img/plus.png") left 6px no-repeat;
}
.horizontal .menu_light_theme ul .levels a.parent, .horizontal .menu_light_theme ul .levels a.parent:hover {
background: url("http://bs-designs.webuda.com/menu/img/arrow_right1.png") right center no-repeat;
}
.horizontal .menu_light_theme ul .contact_form input:focus,
.horizontal .menu_light_theme ul .contact_form textarea:focus,
.horizontal .menu_light_theme ul .contact_form select:focus,
.horizontal .menu_light_theme ul .contact_form input:hover,
.horizontal .menu_light_theme ul .contact_form textarea:hover,
.horizontal .menu_light_theme ul .contact_form select:hover {
box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 3px;
border: 1px solid #333333;
}
.horizontal .menu_light_theme ul .contact_form input, .horizontal .menu_light_theme ul textarea, .horizontal .menu_light_theme ul select {
color: #FFFFFF;
background-color: #222222;
border: 1px solid #0A0A0A;
}
.horizontal .menu_light_theme ul .contact_form input.button {
background-color: #1E1E1E;
border: 1px solid #0A0A0A;
color: #cccccc;
}
.horizontal .menu_light_theme ul .contact_form input.button:hover {
color: #eeeeee;
background-color: #222222;
border: 1px solid #000000;
}
.horizontal .menu_light_theme .menu li:hover div a {
border-bottom: none;
}
.horizontal .menu_light_theme .menu li.noactive a {
color: #eeeeee;
}
.horizontal .menu_dark_theme ul li:hover, .horizontal .menu_dark_theme ul li.nodrop:hover {
background: #161616;
border: 1px solid #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#212121), to(#161616));
background: -webkit-linear-gradient(top, #212121, #161616);
background: -moz-linear-gradient(top, #212121, #161616);
background: -o-linear-gradient(top, #212121, #161616);
background: -ms-linear-gradient(top, #212121, #161616);
background: linear-gradient(top, #212121, #161616);
}
.horizontal .menu_dark_theme ul li:hover a {
color: #ffffff;
border-bottom: 1px solid #161616;
}
.horizontal .menu_dark_theme ul li .drop, .horizontal .menu_dark_theme .menu li.noactive .drop {
background: url("http://bs-designs.webuda.com/menu/img/arrow_down2.png") no-repeat right 13px;
}
.horizontal .menu_dark_theme ul li:hover .drop {
background: url("http://bs-designs.webuda.com/menu/img/arrow_down2.png") no-repeat right 12px;
}
.horizontal .menu_dark_theme ul .dropdown_1column,
.horizontal .menu_dark_theme ul .dropdown_2columns,
.horizontal .menu_dark_theme ul .dropdown_3columns,
.horizontal .menu_dark_theme ul .dropdown_4columns,
.horizontal .menu_dark_theme ul .dropdown_5columns,
.horizontal .menu_dark_theme ul .dropdown_fullwidth,
.horizontal .menu_dark_theme ul .levels li ul {
background: #161616;
border: 1px solid #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#161616), to(#0a0a0a));
background: -webkit-linear-gradient(top, #161616, #0a0a0a);
background: -moz-linear-gradient(top, #161616, #0a0a0a);
background: -o-linear-gradient(top, #161616, #0a0a0a);
background: -ms-linear-gradient(top, #161616, #0a0a0a);
background: linear-gradient(top, #161616, #0a0a0a);
}
.horizontal .menu_dark_theme ul p,
.horizontal .menu_dark_theme ul ul,
.horizontal .menu_dark_theme ul li,
.horizontal .menu_dark_theme ul h2,
.horizontal .menu_dark_theme ul h3 {
color: #ffffff;
}
.horizontal .menu_dark_theme ul h2, .horizontal .menu_dark_theme ul h3 {
border-bottom: 1px solid #333333;
}
.horizontal .menu_dark_theme ul .imgshadow_dark, .horizontal .menu_dark_theme ul .imgshadow_light {
background: #FFFFFF;
border: 1px solid #333333;
-webkit-box-shadow: 0 0 5px #000000;
-moz-box-shadow: 0 0 5px #000000;
box-shadow: 0 0 5px #000000;
}
.horizontal .menu_dark_theme ul .imgshadow_light {
border: 1px solid #777777;
}
.horizontal .menu_dark_theme ul li .black_box, .horizontal .menu_dark_theme ul li .dark_grey_box {
background-color: #0A0A0A;
-webkit-box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
box-shadow: inset 0 0 3px #000000;
}
.horizontal .menu_dark_theme ul li .greybox li {
background: #0A0A0A;
border: 1px solid #000000;
}
.horizontal .menu_dark_theme ul li .greybox li:hover {
background: #141414;
border: 1px solid #111111;
}
.horizontal .menu_dark_theme ul li .plus li {
background: url("http://bs-designs.webuda.com/menu/img/plus_dark.png") left 6px no-repeat;
}
.horizontal .menu_dark_theme ul .levels a.parent, .horizontal .menu_dark_theme ul .levels a.parent:hover {
background: url("http://bs-designs.webuda.com/menu/img/arrow_right2.png") right center no-repeat;
}
.horizontal .menu_dark_theme ul .contact_form input:focus, .horizontal .menu_dark_theme ul .contact_form textarea:focus, .horizontal .menu_dark_theme ul .contact_form select:focus {
box-shadow: rgba(0, 0, 0, 0.7) 0 0 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 8px;
border: 1px solid #333333;
}
.horizontal .menu_dark_theme ul .contact_form input:hover, .horizontal .menu_dark_theme ul .contact_form textarea:hover, .horizontal .menu_dark_theme ul .contact_form select:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 8px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 8px;
}
.horizontal .menu_dark_theme ul .contact_form input, .horizontal .menu_dark_theme ul .contact_form textarea, .horizontal .menu_dark_theme ul .contact_form select {
color: #FFFFFF;
background-color: #222222;
border: 1px solid #0A0A0A;
}
.horizontal .menu_dark_theme ul .contact_form input.button {
background-color: #1E1E1E;
border: 1px solid #0A0A0A;
color: #cccccc;
}
.horizontal .menu_dark_theme ul .contact_form input.button:hover {
color: #eeeeee;
background-color: #222222;
border: 1px solid #000000;
}
.horizontal .menu_dark_theme .menu li:hover div a {
border-bottom: none;
}
.horizontal .menu_black {
background: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#2a2a2a));
background: -webkit-linear-gradient(top, #555555, #2a2a2a);
background: -moz-linear-gradient(top, #555555, #2a2a2a);
background: -o-linear-gradient(top, #555555, #2a2a2a);
background: -ms-linear-gradient(top, #555555, #2a2a2a);
background: linear-gradient(top, #555555, #2a2a2a);
}
.horizontal .wrapper_menu .menu_black {
border: 1px solid #444;
border-top: 1px solid #777;
}
.horizontal .wrapper_menu_full .menu_black {
border-bottom: 1px solid #444;
}
.horizontal .menu_dark_theme .menu_black li:hover div a {
color: #CCC;
}
.horizontal .menu_dark_theme .menu_black li:hover div a:hover {
color: #EEE;
}
.horizontal .menu_dark_theme .menu_black li ul li a:hover {
color: #EEE;
}
.horizontal .menu_light_theme .menu_black li:hover div a {
color: #444;
}
.horizontal .menu_light_theme .menu_black li:hover div a:hover {
color: #777;
}
.horizontal .menu_light_theme .menu_black li ul li a:hover {
color: #777;
}
.horizontal .menu_blue {
background: #014464;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0272a7), to(#013953));
background: -webkit-linear-gradient(top, #0272a7, #013953);
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -o-linear-gradient(top, #0272a7, #013953);
background: -ms-linear-gradient(top, #0272a7, #013953);
background: linear-gradient(top, #0272a7, #013953);
}
.horizontal .wrapper_menu .menu_blue {
border: 1px solid #015b86;
border-top: 1px solid #029feb;
}
.horizontal .wrapper_menu_full .menu_blue {
border-bottom: 1px solid #015b86;
}
.horizontal .menu_dark_theme .menu_blue li:hover div a {
color: #0294da;
}
.horizontal .menu_dark_theme .menu_blue li:hover div a:hover {
color: #33bcfd;
}
.horizontal .menu_dark_theme .menu_blue li ul li a:hover {
color: #33bcfd;
}
.horizontal .menu_light_theme .menu_blue li:hover div a {
color: #015b86;
}
.horizontal .menu_light_theme .menu_blue li:hover div a:hover {
color: #029feb;
}
.horizontal .menu_light_theme .menu_blue li ul li a:hover {
color: #029feb;
}
.horizontal .menu_brown {
background: #44391e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#736033), to(#382f19));
background: -webkit-linear-gradient(top, #736033, #382f19);
background: -moz-linear-gradient(top, #736033, #382f19);
background: -o-linear-gradient(top, #736033, #382f19);
background: -ms-linear-gradient(top, #736033, #382f19);
background: linear-gradient(top, #736033, #382f19);
}
.horizontal .wrapper_menu .menu_brown {
border: 1px solid #5c4c29;
border-top: 1px solid #a28748;
}
.horizontal .wrapper_menu_full .menu_brown {
border-bottom: 1px solid #5c4c29;
}
.horizontal .menu_dark_theme .menu_brown li:hover div a {
color: #8b733e;
}
.horizontal .menu_dark_theme .menu_brown li:hover div a:hover {
color: #bfa670;
}
.horizontal .menu_dark_theme .menu_brown li ul li a:hover {
color: #bfa670;
}
.horizontal .menu_light_theme .menu_brown li:hover div a {
color: #5c4c29;
}
.horizontal .menu_light_theme .menu_brown li:hover div a:hover {
color: #a28748;
}
.horizontal .menu_light_theme .menu_brown li ul li a:hover {
color: #a28748;
}
.horizontal .menu_green {
background: #3e5718;
background-image: -webkit-gradient(linear, left top, left bottom, from(#658c26), to(#354914));
background: -webkit-linear-gradient(top, #658c26, #354914);
background: -moz-linear-gradient(top, #658c26, #354914);
background: -o-linear-gradient(top, #658c26, #354914);
background: -ms-linear-gradient(top, #658c26, #354914);
background: linear-gradient(top, #658c26, #354914);
}
.horizontal .wrapper_menu .menu_green {
border: 1px solid #52711f;
border-top: 1px solid #8bc135;
}
.horizontal .wrapper_menu_full .menu_green {
border-bottom: 1px solid #52711f;
}
.horizontal .menu_dark_theme .menu_green li:hover div a {
color: #6f992a;
}
.horizontal .menu_dark_theme .menu_green li:hover div a:hover {
color: #a3d158;
}
.horizontal .menu_dark_theme .menu_green li ul li a:hover {
color: #a3d158;
}
.horizontal .menu_light_theme .menu_green li:hover div a {
color: #52711f;
}
.horizontal .menu_light_theme .menu_green li:hover div a:hover {
color: #8bc135;
}
.horizontal .menu_light_theme .menu_green li ul li a:hover {
color: #8bc135;
}
.horizontal .menu_lightblue {
background: #52786b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#709e8e), to(#52786b));
background: -webkit-linear-gradient(top, #709e8e, #52786b);
background: -moz-linear-gradient(top, #709e8e, #52786b);
background: -o-linear-gradient(top, #709e8e, #52786b);
background: -ms-linear-gradient(top, #709e8e, #52786b);
background: linear-gradient(top, #709e8e, #52786b);
}
.horizontal .wrapper_menu .menu_lightblue {
border: 1px solid #608c7d;
border-top: 1px solid #99b9ae;
}
.horizontal .wrapper_menu_full .menu_lightblue {
border-bottom: 1px solid #608c7d;
}
.horizontal .menu_dark_theme .menu_lightblue li:hover div a {
color: #608c7d;
}
.horizontal .menu_dark_theme .menu_lightblue li:hover div a:hover {
color: #99b9ae;
}
.horizontal .menu_dark_theme .menu_lightblue li ul li a:hover {
color: #99b9ae;
}
.horizontal .menu_light_theme .menu_lightblue li:hover div a {
color: #608c7d;
}
.horizontal .menu_light_theme .menu_lightblue li:hover div a:hover {
color: #99b9ae;
}
.horizontal .menu_light_theme .menu_lightblue li ul li a:hover {
color: #99b9ae;
}
.horizontal .menu_orange {
background: #d24900;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6717), to(#c14300));
background: -webkit-linear-gradient(top, #ff6717, #c14300);
background: -moz-linear-gradient(top, #ff6717, #c14300);
background: -o-linear-gradient(top, #ff6717, #c14300);
background: -ms-linear-gradient(top, #ff6717, #c14300);
background: linear-gradient(top, #ff6717, #c14300);
}
.horizontal .wrapper_menu .menu_orange {
border: 1px solid #f45500;
border-top: 1px solid #ff945b;
}
.horizontal .wrapper_menu_full .menu_orange {
border-bottom: 1px solid #f45500;
}
.horizontal .menu_dark_theme .menu_orange li:hover div a {
color: #f45500;
}
.horizontal .menu_dark_theme .menu_orange li:hover div a:hover {
color: #ff945b;
}
.horizontal .menu_dark_theme .menu_orange li ul li a:hover {
color: #ff945b;
}
.horizontal .menu_light_theme .menu_orange li:hover div a {
color: #f45500;
}
.horizontal .menu_light_theme .menu_orange li:hover div a:hover {
color: #ff945b;
}
.horizontal .menu_light_theme .menu_orange li ul li a:hover {
color: #ff945b;
}
.horizontal .menu_pink {
background: #910045;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d50066), to(#80003d));
background: -webkit-linear-gradient(top, #d50066, #80003d);
background: -moz-linear-gradient(top, #d50066, #80003d);
background: -o-linear-gradient(top, #d50066, #80003d);
background: -ms-linear-gradient(top, #d50066, #80003d);
background: linear-gradient(top, #d50066, #80003d);
}
.horizontal .wrapper_menu .menu_pink {
border: 1px solid #b30055;
border-top: 1px solid #ff1a87;
}
.horizontal .wrapper_menu_full .menu_pink {
border-bottom: 1px solid #b30055;
}
.horizontal .menu_dark_theme .menu_pink li:hover div a {
color: #e6006d;
}
.horizontal .menu_dark_theme .menu_pink li:hover div a:hover {
color: #ff4da1;
}
.horizontal .menu_dark_theme .menu_pink li ul li a:hover {
color: #ff4da1;
}
.horizontal .menu_light_theme .menu_pink li:hover div a {
color: #b30055;
}
.horizontal .menu_light_theme .menu_pink li:hover div a:hover {
color: #ff1a87;
}
.horizontal .menu_light_theme .menu_pink li ul li a:hover {
color: #ff1a87;
}
.horizontal .menu_purple {
background: #6a5f71;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8c8094), to(#615867));
background: -webkit-linear-gradient(top, #8c8094, #615867);
background: -moz-linear-gradient(top, #8c8094, #615867);
background: -o-linear-gradient(top, #8c8094, #615867);
background: -ms-linear-gradient(top, #8c8094, #615867);
background: linear-gradient(top, #8c8094, #615867);
}
.horizontal .wrapper_menu .menu_purple {
border: 1px solid #7b6f83;
border-top: 1px solid #ada5b3;
}
.horizontal .wrapper_menu_full .menu_purple {
border-bottom: 1px solid #7b6f83;
}
.horizontal .menu_dark_theme .menu_purple li:hover div a {
color: #7b6f83;
}
.horizontal .menu_dark_theme .menu_purple li:hover div a:hover {
color: #ada5b3;
}
.horizontal .menu_dark_theme .menu_purple li ul li a:hover {
color: #ada5b3;
}
.horizontal .menu_light_theme .menu_purple li:hover div a {
color: #7b6f83;
}
.horizontal .menu_light_theme .menu_purple li:hover div a:hover {
color: #ada5b3;
}
.horizontal .menu_light_theme .menu_purple li ul li a:hover {
color: #ada5b3;
}
.horizontal .menu_red {
background: #830701;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d70b02), to(#830701));
background: -webkit-linear-gradient(top, #d70b02, #830701);
background: -moz-linear-gradient(top, #d70b02, #830701);
background: -o-linear-gradient(top, #d70b02, #830701);
background: -ms-linear-gradient(top, #d70b02, #830701);
background: linear-gradient(top, #d70b02, #830701);
}
.horizontal .wrapper_menu .menu_red {
border: 1px solid #a40802;
border-top: 1px solid #fd190f;
}
.horizontal .wrapper_menu_full .menu_red {
border-bottom: 1px solid #a40802;
}
.horizontal .menu_dark_theme .menu_red li:hover div a {
color: #d60a03;
}
.horizontal .menu_dark_theme .menu_red li:hover div a:hover {
color: #fd5953;
}
.horizontal .menu_dark_theme .menu_red li ul li a:hover {
color: #fd5953;
}
.horizontal .menu_light_theme .menu_red li:hover div a {
color: #a40802;
}
.horizontal .menu_light_theme .menu_red li:hover div a:hover {
color: #fd190f;
}
.horizontal .menu_light_theme .menu_red li ul li a:hover {
color: #fd190f;
}
.horizontal .menu li.noactive, .horizontal .menu li.noactive:hover {
background: none;
border: none;
margin-right: 20px;
}
.horizontal .menu li.noactive a {
padding: 5px 27px 3px 10px;
text-shadow: 1px 1px 1px #000;
border-bottom: none;
}
.horizontal .menu li.noactive.right {
margin-right: 0;
}
</style>
<div class="tabs"> </div>
<div class="region region-content">
<div id="block-mega-menu-3" class="block block-mega-menu">
<div class="content">
<div class="horizontal">
<div class="wrapper_menu menu_dark_theme"><!-- BEGIN MENU WRAPPER -->
<ul class="menu menu_blue"><!-- BEGIN MENU -->
<li><a href="#" class="drop">Home</a>
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2 firstcolumn">
<h2>Welcome !</h2>
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, <a href="#">links</a> etc.</p>
<h2 class="pusher">Cross Browser Support</h2>
<div class="col_1 firstcolumn"><img src="http://bs-designs.webuda.com/admint/upload/server/php/files/browsers.png" width="125" height="46" alt="" /></div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
<h2 class="pusher">Compatible Browsers</h2>
<div class="col_1 firstcolumn">
<ul class="plus">
<li>Internet Explorer</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
</div>
<div class="col_1">
<ul class="plus">
<li>Chrome</li>
<li>Safari</li>
<li>What else ?</li>
</ul>
</div>
</div>
</div>
<!-- End 2 columns container --></li>
<li><a href="#" class="drop">2 Columns</a>
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_1 firstcolumn">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1 firstcolumn">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
<!-- End 2 columns container --></li>
<li><a href="#" class="drop">3 Columns</a>
<div class="dropdown_3columns"><!-- Begin 3 columns container -->
<div class="col_3 firstcolumn">
<h2>Lists in Boxes</h2>
<div class="col_1 firstcolumn">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
<div class="col_3 firstcolumn">
<h2 class="pusher">Here are some image examples</h2>
<img src="img/03.jpg" width="70" height="70" class="img_right imgshadow_light" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<br />
<a href="#">Read more...</a></p>
<img src="img/04.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada.<br />
<a href="#">Read more...</a></p>
</div>
</div>
<!-- End 3 columns container --></li>
<li><a href="#" class="drop">4 Columns</a>
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4 firstcolumn">
<h2>This is a heading title</h2>
<div class="col_2 firstcolumn">
<p class="favorite">This is a paragraph with a favorite icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus.</p>
<p class="help">This is a paragraph with a help icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus.</p>
</div>
<div class="col_2">
<p class="mail">This is a paragraph with a mail icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus.</p>
<p class="print">This is a paragraph with a print icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus.</p>
</div>
</div>
<div class="col_1 firstcolumn">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
<!-- End 4 columns container --></li>
<li><a href="#" class="drop">5 Columns</a>
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5 firstcolumn">
<h2>This is an example of a large container with 5 columns</h2>
<div class="col_1 firstcolumn">
<p class="dark_grey_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>
<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>
<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>
<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>
</div>
<div class="col_5 firstcolumn">
<h2>Here is some content with side images</h2>
<div class="col_3 firstcolumn"><img src="img/01.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<br />
<a href="#">Read more...</a></p>
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<br />
<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
</div>
</div>
</div>
<!-- End 5 columns container --></li>
<li><a href="#" class="drop">Drop Down</a>
<div class="dropdown_1column">
<div class="col_1 firstcolumn">
<ul class="levels">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#" class="drop">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Mavi Açılır Çok İşlevsel Menü
Çok İşinize Yarıyacak Bir Menü.
Bugün 121 ziyaretçi (146 klik) kişi burdaydı!
