これは私のCSSです:
/* Navigation Bar */
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
私の期待する結果は、リンクが次のように表示されることです。
これはほとんどの要素に当てはまりますが、リンクバーの最初のリンクは次のようになります。
リンクバーコード:
<div id="linkBar" class="linkbar">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="course.php">Course</a></li>
<li><a href="help.php">Help</a></li>
</ul>
</div>
私はこれのためにjsfiddleを作成しました(jsfiddleでは、リンクバーの最初のリンクで問題が発生しないので、これは私のコードの残りの部分で問題があることを意味しますか?)。
cssを次のように変更するだけで、ナビゲーションバーの問題を解決できます。
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
しかし、これは、訪問した通常のリンクのテキストの色が白であることを意味します-これは私が望むものではありません(一部の通常のリンクは明るいまたは白い背景にあるため)。
私はこれのためにjsfiddleを作成しました(訪問したリンクは白です)。
誰かが私が間違っていることを見ることができます/それを修正する方法の方向に私を向けますか?