Hi everyone! Nice to meet you...
I've been having a hard time trying to figure out this one; I don't know how to add the following menu to my theme:
<ul id="menu">
<li><a href="#" class="about">About Us</a></li>
<li><a href="#" class="service">Services</a></li>
<li><a href="#" class="blog">Blog</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
The issue is that her's the way I wrote the CSS, it's made with sprites technique:
ul#menu{
width: 551px;
margin-left: 170px;
margin-top: 114px;
list-style: none;
}
ul#menu li a{
display: block;
float: left;
height: 35px;
background-image: url(img/menu.png);
text-indent: -9999px;
}
ul#menu li a.about{
width: 146px;
background-position: 0 0;
}
ul#menu li a.about:hover{
background-position: 0 -44px;
}
ul#menu li a.service{
width: 140px;
background-position: -146px 0;
}
ul#menu li a.service:hover{
background-position: -146px -44px;
}
ul#menu li a.blog{
width: 120px;
background-position: -286px 0;
}
ul#menu li a.blog:hover{
background-position: -286px -44px;
}
ul#menu li a.contact{
width: 144px;
background-position: -406px 0;
}
ul#menu li a.contact:hover{
background-position: -406px -44px;
}
So the Method of
<% if Menu(1) %> <ul><% control Menu(1) %>...
possibly won't work, so which could the best method to accomplish a menu that's as functional as the one the HTML has??
Thanks for reading this,
Alan S.