فایل header.php پوسته رو باز کنید و کد زیر رو در مکان مناسبی قرار دهید:
<ul id="nav">
<?php wp_list_pages('title_li=') ?>
</ul>
سپس کد زیر رو به style.css اضافه کنید:
ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li
{
float: left;
position: relative;
width: 148px;
margin: 0 20px 0 0;
}
ul#nav li a
{
display: block;
padding: 5px 10px;
border: solid 1px #000;
color: #fff;
background-color: #000;
text-decoration: none;
font: 12px Tahoma, Geneva, sans-serif;
}
ul#nav li a:hover
{
color: #000;
background-color: #fff;
}
ul#nav li ul
{
position: absolute;
top: 100%;
display: none;
}
کد زیر رو هم در header.php بین تگ head قرار دهید:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#nav li").hover(
function() {
$("ul:hidden", this).slideDown(300);
},
function() {
$("ul", this).slideUp(100);
}
);
});
</script>