okay bloggers, this time i just will share about page menu style that can you use on your blog, this is 2nd page menus style after “page menu with ribbon style“. this is original by me. if you like to modify it, i do not forbid you to it. just modify and learn the CSS code inside 🙂 , it is will add your knowledge about design. This style is with dropdown menu, it seen simple and classic
maybe, this is simpler than previous page menu style. but i am sure, Css code inside it is easier to understood. Because i was deliberately made it that way in order to ease you to understand css code.
.menu {
z-index:9999;
text-transform:uppercase;
font-size:15px;
position:relative;
margin: 0 auto;
padding: 0 10px;
list-style:none;
height:32px;
background:#f0f0f0;
border:solid 1px #000;
}
.menu >li{
display:inline;
margin:0 auto;
position:relative;
padding:6px 1px;
text-align:center;
float:left;
}
.menu >li >a {
text-decoration:none;
background:#000;
color:white;
font-family:arial, calibri, trebuchet MS;
font-weight:bold;
padding: 4px 28px;
border:solid 2px #000;
}
.menu li a:hover {
background:#fff;
color:#000;
-moz-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-google-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
}
.menu >li >a:visited, .child >li >a:visited {
background:#fff;
color:#000;
}
.child {
display:none;
position:absolute;
z-index:9999;
padding:0px;
width:150px;
}
.menu li:hover .child{
display:block;
top:30px;
}
.child >li{
padding:0px ;
display:block;
text-align:left;
position:relative;
border-bottom:solid 1px #fff;
}
.child >li:last-child{
border-bottom:solid 1px #000;
}
.child >li >a {
text-decoration: none;
border:solid 2px #000;
padding:5px;
background:#000;
color:white;
font-family:arial, calibri, trebuchet MS;
font-weight:bold;
display:block;
}
This is it Demo :