I am new to wordpress development and i have html file to change that into wordpress theme.
I have read some good tuttorial to check how to create wordpress theme
and so far i made the index.php and header.php and footer.php side_bar.php also changes the path of all files (images and js) to take path from template folder.
I also get the menus from wp_menu but Now the problem is with me is that in my XHTML following
<div id="main-menu-container">
<ul>
<li class="menu-parent"><a href="#" target="_self"><span>HOME</span></a></li>
<li class="menu-parent"><a href="#" target="_self"><span>PROPERTIES</span></a></li>
<li class="menu-parent"><a href="#" target="_self"><span>BUYING</span></a>
<ul class="menu-child">
<li class="menu-child-li"><a target="_self" href="#"><span>Reasons to buy</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>buys tips</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>first time buyer</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>obtaining a mortgage</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>mortgage information</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>purchasing costs</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>moving checklist</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>condo's vs houses</span></a></li>
</ul>
</li>
<li class="menu-parent"><a href="#" target="_self"><span>SELLING</span></a>
<ul class="menu-child">
<li class="menu-child-li"><a target="_self" href="#"><span>sellers tips</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>first time sellers</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>when will it sell</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>moving check list</span></a></li>
<li class="menu-child-li"><a target="_self" href="#"><span>for sale by owner</span></a></li>
</ul>
</li>
<li class="menu-parent"><a href="#l" target="_self"><span>REPORTS</span></a>
</li><li class="menu-parent"><a href="#l" target="_self"><span>RESOURCES</span></a>
</li><li class="menu-parent"><a href="#l" target="_self"><span>BLOG</span></a>
</li><li class="menu-parent"><a href="#" target="_self"><span>ABOUT ME</span></a></li></ul>
</div>
and css for this menu of html is as follows :
#main-menu-container {
float: left;
height: auto;
margin-left: 9px;
margin-top: 27px;
padding: 0;
text-align: justify;
width: 201px;
}
#main-menu-container ul {
list-style: none inside none;
margin: 0;
padding: 0;
position: relative;
}
#main-menu-container ul li {
font-family: 'SansationBold';
font-size: 17px;
height: 35px;
padding-top: 10px;
position: relative;
white-space: nowrap;
}
#main-menu-container LI a {
color: #FFFFFF;
font-size: 16px;
line-height: 20px;
margin-right: 0;
padding: 0 20px 0 15px;
text-decoration: none;
}
#main-menu-container ul li a:hover {
color: #000000;
}
#main-menu-container ul li.menu-parent li a:hover {
color: #000000;
}
#main-menu-container ul > li.menu-parent > a > span {
border-bottom: 1px solid #780001;
display: block;
margin-left: -16px;
padding: 0 0 13px;
width: 192px;
}
#main-menu-container ul li ul, #main-menu-container ul li:hover li ul {
left: -999em;
margin-top: -49px;
position: absolute;
z-index: 10;
}
#main-menu-container ul li:hover ul {
left: 198px;
}
#main-menu-container ul ul ul {
border: 1px solid #000000;
}
#main-menu-container ul ul li:hover ul {
border: 1px solid #FFFFFF;
left: 75px;
padding-top: 5px;
top: -6px;
}
#main-menu-container ul li li {
border: 0 none;
float: none;
line-height: normal;
}
#main-menu-container .menu-child {
background: url("../images/navi-bg.jpg") repeat-x scroll 0 0 transparent;
}
#main-menu-container .menu-parent:hover {
border-color: #FFFFFF;
}
#main-menu-container .menu-child li:hover, #main-menu-container .menu-child li:hover a {
background-color: #D90130;
}
#main-menu-container .menu-child li:hover a span {
color: #000000;
}
#main-menu-container ul li a {
display: block;
}
#main-menu-container ul li.menu-parent {
}
#main-menu-container ul li ul, #main-menu-container ul li:hover li ul {
left: -999em;
position: absolute;
z-index: 10;
}
#main-menu-container ul li li {
border: 0 none;
float: none;
line-height: normal;
}
and how to adjust this vertical menu in wp .
I am new to worpress so please ask me if anything i missed in question posting
