We discussed 2 basic techniques to make CSS tabs - float <li> + block <a> and inline <li> + <a> in our last topic. Both methods are capable of making one level tabs. How about 2 level CSS tabs using the 2 techniques? Let's take look at the results.
The navigation tab using this method looks well. The 2nd level <ul> elements are absolutely positioned relative to the 1st level <li> elements. So the key is to decide the attribute ul {top:xx} of the 2nd <ul> elements.
Here is the balanced result of using inline method. This result looks similar in both IE and Firefox. But there's always some difference between the 2 browers if I tried to reach the same effect as using float <li> method.
So there's no choice if you decide to use list elements to make 2 level tabs. Use float <li> + block <a> technique for your tabs. But I have a strong feeling it's not enough to just have the pure CSS tab. To make it useful, javascript is a must to simplify the HTML code. This will be our next topic - a practical 2 level tab using javascrit and CSS.
Social Bookmark if the page is useful.