İndir - Demo ve Ayrıntılı Bilgi


Kod:

CSS3 Menu Dark

CSS
.drop-menu_dark {
display: block;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 10px 10px;
font-size: 22px;
height: 25px;
max-height: 25px;
width: 200px;
cursor: pointer;
background-color: #424242;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

.drop-menu_dark:hover {
background-color: #424242;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
}

.drop-menu_dark:hover .sub-menu_dark {
display: inline-block;
border-top-color: #151515;
border-top-width: 1px;
border-top-style: solid;
}

.sub-menu_dark {
display: none;
width: 220px;
background: #424242;
padding: 0px;
margin-left: -10px;
margin-top: 8px;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
margin-right: 0px;
margin-bottom: 0px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}

.sub-menu_dark li {
list-style-type: none;
display: block;
height: 32px;
border-bottom-color: #151515;
border-bottom-width: 1px;
border-bottom-style: solid;
color: #C0C0C0;
width: 180px;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
margin: 0px;
float: left;
box-shadow:inset 0;
-moz-box-shadow:inset 0;
}

.sub-menu_dark li a {
font-size: 16px;
display: block;
line-height: 26px;
text-shadow: 0px 0px 5px #000;
text-decoration: none;
}

.drop-menu_dark .sub-menu_dark li a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-right: 15px;
height: 32px;
width: 32px;
}

.sub-menu_dark li:hover {
border-bottom-color: #151515;
border-bottom-width: 1px;
border-bottom-style: solid;
color: #FFF;
background-color: #2D2D2D;
box-shadow:inset 0 0 4px #2D2D2D;
-moz-box-shadow:inset 0 0 4px #2D2D2D;
}

.sub-menu_dark #final {
background-color: #424242;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
height: 32px;
float: left;
}

.sub-menu_dark #final:hover {
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
color: #FFF;
background-color: #2D2D2D;
box-shadow:inset 0 0 4px #2D2D2D;
-moz-box-shadow:inset 0 0 4px #2D2D2D;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}