上部に水平タブを表示する Web ページを作成しようとしています。いくつかの異なる例から CSS と HTML をコピーしましたが、最終的には常に垂直方向の順序付けられていないオプションのリストになります。私が実験しているものと競合する順序付けられていないリストに関する CSS は他にありません。CSSは次のとおりです。
#ts_tabmenu {
font-size: .75em;
padding: 20px 0px 0px 20px;
}
#ts_tabmenu ul
{
line-height: 1em;
margin: 0px;
list-style-type: none;
float: left;
padding: 0px 0px 0px 5px;
}
#ts_tabmenu ul li
{
float: left;
}
#ts_tabmenu ul li a
{
text-decoration: none;
display: block;
float: left;
padding: 0px 0px 0px 10px;
background: url(tabs.gif) no-repeat left top;
margin-left: -5px;
z-index: 0;
position: relative;
color: #666666;
}
#ts_tabmenu ul li a strong
{
font-weight: normal; /* remove the bold effect */
display: block;
background: url(tabs.gif) no-repeat right top;
padding: 6px 10px 7px 5px;
cursor: pointer;
}
#ts_tabmenu ul li a:hover
{
position: relative;
z-index: 5;
background: url(tabs.gif) no-repeat left bottom;
color: #000000;
}
#ts_tabmenu ul li a:hover strong
{
background-image: url(tabs.gif) no-repeat;
position: relative;
z-index: 5;
background-position: right bottom;
}
HTML は次のとおりです。
<div id="ts_tabmenu">
<ul>
<li><a href=#Dashboard><strong>Tutorialsphere</strong></a></li>
<li><a href=#><strong>Photoshop</strong></a></li>
<li><a href=#><strong>Illustrator</strong></a></li>
<li><a href=#><strong>Fireworks</strong></a></li>
<li><a href=#><strong>Flash</strong></a></li>
<li><a href=#><strong>CSS</strong></a></li>
<li><a href=#><strong>PHP</strong></a></li>
</ul>
</div>
どんなアドバイスでも大歓迎です。
よろしく。