0

ローカルで実行すると、jsfiddle からのこのリンクが正しく機能しないのはなぜですか?

コードをコピーしてローカルでテストしました。

<html>
<head>
<script type="text/css">
.btn {
    display: block;
    width: 68px;
    height: 22px;
    padding-top: 70px;
    font-weight: bold;
    float: left;
    padding-right:30px;
    text-align:center;
}
.btn {
    background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}
.btn:hover {
    background-position: -5px -120px;
}
.menu ul li {
    list-style:none;
}
.menu {
    display: inline;
    float: left;
    padding-right:30px;
    padding:20px 0 0 20px;
}
a {
    text-decoration:none;
    color:#000;
}
.menu ul li ul {
    display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:90px;
}
.menu ul li:hover ul {
    display:block;
    padding:15px;
    line-height:30px;
}
.menu ul li a:hover {
    color:#fff;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}
</script>
<title>Image Hover Test</title>
</head>
<body>
    <div class="menu">
    <ul>
        <li>
            <div class="btn">HOVER</div>
            <ul>
                <li><a href="#">Menu Item</a>

                </li>
                <li><a href="#">Menu Item</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<html>

誰かが何が悪いのか教えてもらえますか? :(理解できないようです。コードをそのままコピーして、テストして調査しました。

4

2 に答える 2

7

<script type="text/css"></script>

する必要があります

<style type="text/css"></style>

CSS スタイルシート

于 2013-08-09T15:44:31.663 に答える
0

script type="text/css" を使用しないでください

スタイルタグを使用する

それが私が見る唯一の違いです

<html>
<head>
<style>
.btn {
    display: block;
    width: 68px;
    height: 22px;
    padding-top: 70px;
    font-weight: bold;
    float: left;
    padding-right:30px;
    text-align:center;
}
.btn {
    background: url("http://www.aidancotter.com/images/face.png") no-repeat -5px 0px;
}
.btn:hover {
    background-position: -5px -120px;
}
.menu ul li {
    list-style:none;
}
.menu {
    display: inline;
    float: left;
    padding-right:30px;
    padding:20px 0 0 20px;
}
a {
    text-decoration:none;
    color:#000;
}
.menu ul li ul {
    display:none;
    background:#78a802;
    position:absolute;
    width:200px;
    color:#fff;
    margin-top:90px;
}
.menu ul li:hover ul {
    display:block;
    padding:15px;
    line-height:30px;
}
.menu ul li a:hover {
    color:#fff;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}
</style>
<title>Image Hover Test</title>
</head>
<body>
    <div class="menu">
    <ul>
        <li>
            <div class="btn">HOVER</div>
            <ul>
                <li><a href="#">Menu Item</a>

                </li>
                <li><a href="#">Menu Item</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<html>
于 2013-08-09T15:46:29.493 に答える