Question

我正在用css制作一个下拉菜单。但是当我将鼠标悬停在链接上时，子链接就会消失。这是有效的，但在它之后褪色链接就像左边的1px和子链接大1px。 HTML：

    <!DOCTYPE html>
<html lang="nl">
    <head>
        <title>..</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
    </head>

    <body>
        <div id="Main-Wrapper">
            <div id="Nav-Bar">
                <div id="Nav-Bar-LinkContainer">
                    <div id="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Voorstellingen</a>
                        <ul>
                            <li><a href="#">Voorstelling 1</a></li>
                            <li><a href="#">Voorstelling 2</a></li>
                            <li><a href="#">Voorstelling 3</a></li>
                            <li><a href="#">Voorstelling 4</a></li>
                        </ul>
                        </li>
                        <li><a href="#">The locals</a></li>
                        <li><a href="#">Speellijst</a></li>
                        <li><a href="#">Boekingen</a></li>
                    </div>
                    <a href=""><img src="images/YouTube.png" id="Social1"></a>
                    <a href=""><img src="images/Facebook.png" id="Social2"></a>
                </div>
            </div>

            <div id="Main-Container">
                <div id="Main-Content">



                </div>
            </div>
        </div>
    </body>
</html>

css：

@font-face { font-family: kop; src: url('Viafont.ttf'); }
#Main-Wrapper {
    font-family: 'Trebuchet MS',Arial,Helvetica,sans-serif;
}
#Nav-Bar {
    background-color: #E6F9FF;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #E6E6E6;
}
#Nav-Bar-LinkContainer {
    height: 70px;
    width: 1100px;
    margin: 0 auto 0 auto;
}
#nav, #nav ul {
    z-index: 4;
    padding: 3px 0 0 0;
    margin: 0;
    list-style: none;
}
#nav li {
    display: block;
    padding-top: 14px;
    padding-bottom: 23px;
    text-align: center;
    float: left;
    width: 160px;
}
#nav ul li {
    width: 200px;
}
#nav ul {
    margin-top: 10px;
    opacity: 0.0;   
    width: 0px;
    transition:opacity 0.4s ease-in-out;
    position:absolute;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
    opacity: 1.0;
    left: auto;

}
#nav li a {
    text-align: center;
    width: 159px;
    display: block;
    margin: 2px 5px 3px 5px;
    text-decoration: none;
    font-family: kop;
    font-size: 1.0em;
}
#nav ul li a {
    background-color: blue;
    text-align: center;
    width: 195px;
    display: block;
    margin: 2px 5px 3px 5px;
    text-decoration: none;
    font-family: kop;
    font-size: 1.0em;
}
div a{
    font-weight: bold;
    color: #535353;
    cursor: pointer;
    transition:color 0.4s;
}
div ul a:link, div ul a:visited{
    color: #FFF;
    cursor: pointer;
}
#nav li a:hover {
    color: #FF6600;
}
div ul li{
    background-color: #666;
}
* html ul li, * html div ul li{
border-bottom: 3px solid #FFF;
}
* html div ul li{
border-top: 0;
}
#Main-Container {
    width: 100%;
    height: 2000px;
    padding-top: 30px;
}
#Main-Content {
    padding: 30px;
    position: relative;
    height: 1000px;
    width: 1100px;
    margin:  0 auto 0 auto;
}
#Social1 {
    width: 35px;
    margin-left: 100px;
    margin-top: 6px;
}
#Social2 {
    width: 35px;
    margin-left: 5px;
}
#Social2:hover,#Social1:hover {
    opacity: 0.5;
}

我还有一个标准的reset.css 你们其中一个人能看到问题吗？

链接正在继续悬停

0 个答案: