Syakirurahman Page Menu With Dropdown Style

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

page menu with dropdown style

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.

okay, see the step below if you want to use this page menu style on your blog. *like generally:
1. log in to your dashboard
2. go to layout/design menu
3. add gadget with HTML/javascript type.
4. then copy the code below and paste on HTML/javascript gadget.

<style type=”text/css”>

.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;
}

</style>
<ul class=”menu”>
<!– start menu 1–>
<li><a href=”#“>menu 1</a></li>
<!– end menu 1–>
<!– start menu 2–>
<li><a href=”#“>menu 2</a>
<ul class=”child”>
<li><a href=”#“>mn2 child 1</a></li>
<li><a href=”#“>mn2 child 2</a></li>
<li><a href=”#“>mn2 child 3</a></li>
</ul>
</li>
<!– end menu 2–>
<!– start menu 3–>
<li><a href=”#“>menu 3</a>
<ul class=”child”>
<li><a href=”#“>mn3 child 1</a></li>
<li><a href=”#“>mn3 child 2</a></li>
<li><a href=”#“>mn3 child 3</a></li>
</ul>
</li>
<!– end menu 3–>
<!– start menu 4–>
<li><a href=”#“>menu 4</a>
<ul class=”child”>
<li><a href=”#“>mn4 child 1</a></li>
<li><a href=”#“>mn4 child 2</a></li>
<li><a href=”#“>mn4 child 3</a></li>
</ul>
</li>
<!– end menu 4–>
</ul>

5. modify the red code to your url you like to linked.
6. modify the yellow code to change color on this menu. remember!, adjust your page menu color with your template/blog design.
7. modify the green code to label for your menu, example “home”, “About”, “contact us”, etc.
8. click save and place it on the top of your layout.
9. finish.
*tips: if you feel this page menu style is not comply with your blog design, i strongly recommend you to don’t use this page menu style.
that’s all, if you have any questions, you can ask it on comment box below, i looking forward for your response.
Happy Blogging 🙂