0

Web サイトを作成していますが、これまでのところ、ナビゲーション バーは [作成中] の下にあります。nav ul liカーソルを合わせると、テキストの背後の背景だけでなく、背景全体の色が変わります。私はこれを持っています：

<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <title>Landstown High School and Technology Academy - Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Sharepoint</a></li>
                <li><a href="#">Employees</a></li>
            </ul>
        </nav>
    </header>
    <section class="body">
</body>
</html>

これは CSS の場合:

body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8

}

/****HEADER STUFF****/

header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}

nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}

nav a:hover
{
background: #00248F;
}

nav ul
{
width: 40%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
}

nav ul li
{
display: inline;
padding: 8%;
}

nav ul li a:hover
{
text-decoration: none;
}

nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}

nav ul li a:visited
{
text-decoration: none;
}

どうすればいいですか？

4

2 に答える 2

0

これを試してください: http://jsfiddle.net/3BBe2/2/。私はあなたのコードを修正しました。

新しい CSS:

    body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8

}

/****HEADER STUFF****/

header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}

nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}

nav ul a{
    padding:3px 3px;
}

/* nav li a:hover
{
    background: #00248F;
} */

nav ul
{
width: 60%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
}

nav ul li
{
display: inline;
padding: 8%;
padding:5px 5px;
    padding:10px 12px 10px;
}

nav ul li:hover
{
    background: #00248F;

}

 nav ul li a
{
color: #F8F8F8;
text-decoration: none;

}

nav ul li a:visited
{
text-decoration: none;
}
于 2013-05-04T15:04:11.293 に答える
0

.nav ul liの上にカーソルを置いても変更できませんa。それを行うための実用的な方法は、Javascript を使用することです。

.navヘッダーの幅が 200% だったので適切に中央揃えできないため、幅を変更しました.nav。

とにかく、これはあなたのために働くでしょう：

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script>
function change() {
document.getElementById("ul").style.backgroundColor="#bbb"; 
document.getElementById('nav').style.backgroundColor="#ccc";
document.getElementById('li').style.backgroundColor="#333";
document.getElementById('li2').style.backgroundColor="#333"; 
document.getElementById('li3').style.backgroundColor="#333"; 
document.getElementById('li4').style.backgroundColor="#333";  
}
function changeback() {
document.getElementById('nav').style.backgroundColor="#888";
document.getElementById("ul").style.backgroundColor="#0033CC"; 
document.getElementById('li').style.backgroundColor="#f00"; 
document.getElementById('li2').style.backgroundColor="#f00"; 
document.getElementById('li3').style.backgroundColor="#f00"; 
document.getElementById('li4').style.backgroundColor="#f00";  
}
</script>

    <header>
        <div id="nav">
            <ul id="ul">
                <li id="li"><a href="#" onmouseover="change()" onmouseout="changeback()">Home</a></li>
                <li id="li2"><a href="#" onmouseover="change()" onmouseout="changeback()">Contact Us</a></li>
                <li id="li3"><a href="#" onmouseover="change()" onmouseout="changeback()">Sharepoint</a></li>
                <li id="li4"><a href="#" onmouseover="change()" onmouseout="changeback()">Employees</a></li>
            </ul>
        </div>
    </header>
    <section class="body">
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    background: #F8F8F8;
}

/****HEADER STUFF****/
header {
    position: fixed;
    height: 10%;
    width: 100%;
    background: #F8F8F8;
    box-shadow: -10px 0 10px #000;
}

#nav ul {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #03C;
}

#nav li {
    display: inline;
    padding: 0 8%;
    background: red;
}

#nav a {
    color: #F8F8F8;
    text-decoration: none;
}

#nav a:visited {
    text-decoration: none;
}
于 2013-05-04T15:52:43.847 に答える