0

这是我的导航栏，下方有一个下拉菜单。书在部门下面，我还有很多，但这是一个例子。当我将鼠标悬停在更多选项上时，它会失去对导航栏的关注并显示图像的悬停描述。我该如何阻止这个？

<div class="NavBar">
        <div align="center">
            <ul>
                <li><a href="Pop-Shopping Homepage Page.html">Home</a></li>
                <li><a href="Pop-Shopping Homepage Page.html">Departments</a>
                    <ul class="MiniNavBar">
                        <li><a href="Pop-Shopping Homepage Page.html">Books</a></li>
<li><a href="Pop-Shopping Homepage Page.html">Books</a></li>
<li><a href="Pop-Shopping Homepage Page.html">Books</a></li>
<li><a href="Pop-Shopping Homepage Page.html">Books</a></li>
    </ul></li>
<li><a href="Pop-Shopping Homepage Page.html">Top Brands</a></li>
                <li><a href="Pop-Shopping Homepage Page.html">Gallery</a></li>
                <li><a href="Pop-Shopping Homepage Page.html">About Us</a></li>
            </ul>
        </div>
    </div>

我的 CSS

.NavBar{
    background-color: #C10000;
    height: auto;
    width: 430px;
    border: thin solid #000000;
    border-radius: 5px;
    margin-top: 8px;
 }

.MiniNavBar{
    width: 97px;
}

.NavBar ul ul {
    display: none;
}

.NavBar ul li:hover > ul {
    display: block;
    font-family: Calibri;
    font-size: 10px;
}

.NavBar ul {
    padding: 2px;
    list-style: none;
    position: relative;
    display: inline-block;
    font-family: Calibri;
    font-size: 15px; 
}

.NavBar ul li {
    float: left;
}

.NavBar ul li:hover {
    background-color: #C10000;
    color: #FFDD00;
}

.NavBar ul li:hover a {
    background-color: #000000;
    color: #FFDD00;
}

.NavBar ul li a {
    display: block; 
    padding: 10px 10px;
    background-color: #C10000;
    color: #FFDD00;
    text-decoration: none;
}

.NavBar ul ul {
    position: absolute; 
}

.NavBar ul ul li {
    float: none;
    margin-top: 0px;
    position: relative;
}

.NavBar ul ul li a {
    padding: 15px 40px;
    background-color: #C10000;
    color: #FFFFFF;
}   

.NavBar ul ul li a:hover {
    background-color: #C10000;
    color: #FFFFFF;
}

.NavBar ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}
4

0 回答 0