0
當我將鼠標懸停在navmenu上時，它會將其他內容放在網頁上。另外，當你將鼠標懸停在導航欄上時，字體不再是白色。我很抱歉，我是編程方面的新手，並且借用了一些代碼，因此可能會很sl。。由於當我將鼠標懸停在我的導航菜單上時，它會將內容向下推，爲什麼？懸停時如何更改li的顏色？
這裏是我的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;
}
這尖叫了[小提琴]（http://jsfiddle.net）。 –
耶穌......那個CSS ...... –
如果你的計劃是學習編碼，我建議你重新開始，並採取小步驟，讓它開始工作，然後繼續前進。建立你的導航，然後添加基本的CSS樣式。建立你的其餘部分，並添加基本的CSS，最好只是顏色塊。一旦你看到你想要它如何添加變換。你正在給予固定的位置，然後騎在相對位置上。它令人困惑和混亂。 – otherDewi