0

作成しているWebサイトのドロップダウンメニューを作成しました。水平方向のナビゲーションバーと垂直方向のドロップダウンバーの間にこの1ピクセルのスペースがありますが、見栄えが良いと思います。スペースにマウスを合わせると、垂直メニューが再び消えます。マウスを1ピクセルのスペースに置くと、ユーザーが非常に混乱することがあります。

これは私のhtmlです。

<div class="nav">
        <div class="links">
            <ul id="dropdown">
                <li class="currentpage">
                    <a href="index.html"> Tetterode </a>
                    <ul>
                        <li><a href="project.html">Project</a></li>
                        <li><a href="promenade.html">Promenade</a></li>
                        <li><a href="brochure.html">Brochure</a></li>
                        <li><a href="impressies.html">Impressies</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Woningen</a>
                    <ul>
                        <li><a href="oplevering.html">Oplevering</a></li>
                        <li><a href="impressies.html">Impressies</a></li>
                        <li><a href="kavelkaart.html">Kavelkaart</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Locatie</a>
                    <ul>
                        <li><a href="ligging.html">Ligging</a></li>
                        <li><a href="routeplanner.html">Routplanner</a></li>
                        <li><a href="situatie.html">Situatie</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Financiering</a>
                    <ul>
                        <li><a href="hypotheken.html">Hypotheken</a></li>
                        <li><a href="fiscaal.html">Fiscale mogelijkheden</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Contact</a>
                    <ul>
                        <li><a href="makelaars.html">Makelaars</a></li>
                        <li><a href="gegevens.html">Gegevens</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>

そして、これは私のcssです。

.nav{
    width: 100%;
    height:50px;
    background-image:url("bg.jpg");
    background-repeat:repeat;
    text-align:center;
    padding-bottom:0px;
    margin-bottom:0px;
}

.links ul li {
   list-style-type: none;
   padding-right: 17px;
   height:50px;
   position:relative;
   display:inline-block;
   padding-top:0px;
   line-height:50px;
   padding-left:17px;
   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
   margin-top:0px;
}
.links ul li:hover {
    height:50px;
   background-color:#b2071a;
   display:inline-block;
   margin:0px;
}
.links a {
   text-transform:uppercase;
   font-family:helvetica;
   font-size:18px;
   color:#fff;
   display:inline-block;
   font-size:20px;
   text-decoration:none;
}
.links a:hover {
  background-color:transparent;
}
#dropdown ul{
    background-color:#b2071a;
    list-style:none;
    position:absolute;
    left:-9999px;
    z-index:20;
    font-size:16px;
    padding-top:0px;
    margin-top:0px;
    }
#dropdown ul li{
    float:none;
}
#dropdown ul a{
    white-space:nowrap; 
    font-size:16px;
}
#dropdown li:hover ul{ 
    left:0;
}
#dropdown li:hover a{ 
    text-decoration:underline;
}
#dropdown li:hover ul a{ 
    text-decoration:none;
}
#dropdown li:hover ul li a:hover{ 
color:#000;
}
.currentpage{
   height:50px;
   background-color:#b2071a;
   display:inline-block;
}

1ピクセルのスペースを引き起こすマージン/パディングが見当たらず、これを解決する方法がわかりません。誰かが私を助けてくれることを願っています、ありがとう。

4

1 に答える 1

1

あなたのコードとスタイルシートはかなり良く、読みやすく、フォローしやすいです。

解決策は、の上部マージンを次のように微調整すること#dropdown ulです-2px。

#dropdown ul{
    background-color:#b2071a;
    list-style:none;
    position:absolute;
    left:-9999px;
    z-index:20;
    font-size:16px;
    padding-top:0px;
    margin-top:-2px;
}

負のマージンは許可されており、非常に便利です。発生した問題はプルダウンメニューで非常に一般的であり、この修正は典型的なものです。

参考のために、フィドルを参照してください：http: //jsfiddle.net/audetwebdesign/Ygn6X/

于 2013-03-13T11:32:25.833 に答える