Question

当我将鼠标悬停在导航菜单上时，会将其他内容推送到网页上。此外，当您将鼠标悬停在导航栏上时，字体不再是白色。对不起，我是编程新手并借用了一些代码，所以它可能很草率。感谢

这是我的HTML：

<div class="nav">
    <ul id="nav">
        <li><a href="http://www.themusicshop.com/default.aspx">Home</a></li>
        <li><a href="http://www.themusicshop.com/t-store.aspx">Shop Online</a></li>
        <li><a href="http://www.themusicshop.com/aeRntplan.aspx">Online Rentals</a>
            <div>
                <ul>
                    <li><a href="http://www.themusicshop.com/aeRntplan.aspx">Rent Now</a></li>
                    <b>Current Rental Customers</b>
                    <li><a href="http://www.themusicshop.com/return.aspx">Rental Returns</a></li>
                    <li><a href="http://www.themusicshop.com/rentalrepair.aspx">Rental Repairs</a></li>
                    <li><a href="http://www.themusicshop.com/exchange.aspx">Rental Exchanges</a></li>
                </ul>
            </div>
        </li>
        <li><a href="http://www.themusicshop.com/plessons.asp">Lessons</a>
            <div>
                <ul>
                    <li><a href="http://www.themusicshop.com/plessons.asp">Private Lessons</a></li>
                    <li><a href="http://www.themusicshop.com/dw-instructors.aspx">Meet the Teachers</a></li>
                    <li><a href="http://www.themusicshop.com/request.asp">Request a Lesson</a></li>
                 </ul>
             </div>
         </li> 

        <li><a href="http://www.themusicshop.com/lessonmain.asp">Performing Arts Center</a>
            <div>
                <ul>
                    <li><a href="http://www.themusicshop.com/summer2008.asp">Musical Theater</a></li>
                  <li><a href="http://www.kindermusik.com/kids-music-classes/class-locations/07005/usa/yyyy/1/">Kindermusik</a></li>
                    <li><a href="http://www.themusicshop.com/recording.asp">Recording Studio</a></li>
                    <li><a href="http://www.themusicshop.com/ensembles.asp">Group Ensembles</a></li>
                </ul>
            </div>
        </li>
        <li><a href="http://www.themusicshop.com/repairs.asp">Repairs</a></li>
        <li><a href="http://www.themusicshop.com/signin.aspx">My Account</a></li>

    </ul>
</div>

这是我的css：

/* main menu styles */
#nav,#nav ul {
font-family: verdana;
list-style: none;
margin: 0;
padding: 0;
position: fixed;
}
#nav {
height: 50px;
left: 0;
overflow: hidden;
top: 0;
position: relative;
}
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background-repeat: no-repeat;
background-position: center top;
color: #fff;
display: inline;
float: left;
font-size: 14px;
height: 51px;
line-height: 40px;
padding: 0 10px;
position: relative;
text-decoration: none;
z-index: 20;
background-color: #005E20;
}
#nav li:first-child a {
background:url(file:///Macintosh%20HD/Users/davidscott/Downloads/example91/images/bg-menu.png) no-repeat left top;
padding-left:35px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}
#nav li.pad {
background: url(file:///Macintosh%20HD/Users/davidscott/Downloads/example91/images/bg-   menu.png) no-repeat right top;
display: inline;
height: 51px;
width: 35px;
}
#nav ul {
background-color: #FFFFFF;
height: auto;
padding: 10px 0;
position: absolute;
top: -115px;
width: 180px;
z-index: 1;
border-radius: 8px; /*some css3*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
transition: 0.8s ease-in-out;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
color: #005E20;
}
#nav ul li {
width:180px;
}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
width:160px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#99ff33;
}

Answer 1

这会改变悬停时导航的高度（向下推动页面的其余部分）：

#nav:hover {
    height:200px;
}

这会在悬停时将颜色更改为绿色：

#nav a:hover, #nav li:hover > a {
    color:#99ff33;
}

这是一个没有悬停定义的基本例子：
http://jsfiddle.net/w4uyX/

Answer 2

这些都在你的CSS代码中（对我来说似乎有点无组织）。

要处理推送其他内容的菜单，请找到设置了更大高度的选择器#nav:hover。

然后找到选择器#nav a:hover,#nav li:hover > a。当您将鼠标悬停在菜单上时，可以设置不同的颜色。

Answer 3

查看我的导航栏并查看差异 http://codepen.io/leandroruel/pen/yrwKI

当我将鼠标悬停在导航菜单上时会将内容推下来，为什么？当我悬停在一起时，如何改变li的颜色？

3 个答案: