I have a notion for a CSS tab menu, and have copied the CSS & HTML code below. The thing is, I want to have the tabs hanging below the line, as in the attached image.
Can someone help me modify the CSS code?
HTML
<ul>
<li class='active'><a href='register.php'><span>Register</span></a></li>
<li><a href='LogIn.php'><span>Log In</span></a></li>
<li class='last'><a href='Guest.php'><span>Guest</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">
</div>
CSS
float: left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#logstyle ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#logstyle li {
display:inline;
margin:0;
padding:0;
}
#logstyle a {
float:left;
background:url('../images/tableftf.gif') no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#logstyle a span {
float:left;
display:block;
background:url('../images/tabrightf.gif') no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#logstyle a span {float:none;}
/* End IE5-Mac hack */
#logstyle .active a span,
#logstyle a:hover span {color:#FFFFFF;}
#logstyle .active a,
#logstyle a:hover {background-position: 0 -42px;}
#logstyle .active a span,
#logstyle a:hover span {background-position: 100% -42px;}