Dreamweaver中的下拉菜單

Question

我想對如何在上述代碼中執行下拉菜單有所幫助。 我現在擁有的代碼是由另一個程序員編寫的，因此當我嘗試在CSS中添加下拉菜單樣式時，它要么浮在頁面頂部，要么完全消失。 這是代碼或所說的NavBar。

 /* CSS Document */ nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; float: left; display: block; width: 150px; height: 60px; text-align: center; line-height: 55px; font-family: Arial, Helvetica, sans-serif; font-size: 17px; } nav ul li a { text-decoration: none; color: #FFF; } nav ul li:hover { background-color: rgb(242, 242, 242); } nav ul li:hover a { display: block; color: #800000; } ul.submenu li { padding-left: 25px; padding-top: 25px; padding-bottom: 25px; } .navClass li:hover .submenu { opacity: 1; } body { margin: 0; padding: 0; } #Holder { width: 980px; height: auto; margin-left: auto; margin-right: auto; margin-top: 21px; margin-bottom: 21px; } #Header { height: 70px; background-image: url(../assets/ntma.png); background-repeat: no-repeat; margin-bottom: 11px; } #NavBar { height: 60px; background-color: rgb(13, 13, 13); } #Content { height: auto; clear: both; overflow: auto; } #ContentLeft { width: 280px; float: left; padding-left: 11px; padding-top: 11px; } #PageHeading { height: auto; padding: 11px; } #ContentRight { width: 680px; float: right; } #Footer { height: 100px; } h1 { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #665; font-weight: lighter; } h2 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; #665; } h6 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; font-size: 14px; } .StyleTxtField { border: 1px solid #665; border-radius: 6px; width: 200px; height: 35px; } 

 <div id="Holder"> <div id="Header"></div> <div id="NavBar"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Services</a> </li> <ul class="submenu"> <li>Save</li> <li>Update</li> <li>Delete</li> <li>Report</li> </ul> </ul> </nav> </div> <div id="Content"> <div id="PageHeading"> 

Answer 1

這樣的事情。

您需要默認隱藏submenu ，然后在將其懸停在主導航的li上時顯示它，並在html中將submenu放入li而不是ul

 /* CSS Document */ nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; float: left; display: block; width: 150px; height: 60px; text-align: center; line-height: 55px; font-family: Arial, Helvetica, sans-serif; font-size: 17px; } nav ul li a { text-decoration: none; color: #FFF; } nav ul li:hover { background-color: rgb(242, 242, 242); } nav ul li:hover a { display: block; color: #800000; } ul.submenu { display: none; } ul.submenu li { padding-left: 25px; padding-top: 25px; padding-bottom: 25px; } #NavBar li:hover .submenu { display: block; } body { margin: 0; padding: 0; } #Holder { width: 980px; height: auto; margin-left: auto; margin-right: auto; margin-top: 21px; margin-bottom: 21px; } #NavBar { height: 60px; background-color: rgb(13, 13, 13); } 

 <div id="NavBar"> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Services</a> <ul class="submenu"> <li>Save</li> <li>Update</li> <li>Delete</li> <li>Report</li> </ul> </li> </ul> </nav> </div> 

Answer 2

檢查更新的代碼

 nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; float: left; display: block; width: 150px; height: 60px; text-align: center; line-height: 55px; font-family: Arial, Helvetica, sans-serif; font-size: 17px; position:relative; } nav ul li a { text-decoration: none; color: #FFF; } nav ul li:hover { background-color: rgb(242,242,242); } nav ul li:hover a { display: block; color: #800000; } .navClass li:hover .submenu { opacity: 1; } body { margin: 0; padding: 0; } #Holder { width: 980px; height: auto; margin-left: auto; margin-right: auto; margin-top: 21px; margin-bottom: 21px; } #Header { height: 70px; background-image: url(../assets/ntma.png); background-repeat: no-repeat; margin-bottom: 11px; } #NavBar { height: 60px; background-color: rgb(13,13,13); } #Content { height: auto; clear: both; overflow: auto; } #ContentLeft { width: 280px; float: left; padding-left: 11px; padding-top: 11px; } #PageHeading { height: auto; padding: 11px; } #ContentRight { width: 680px; float: right; } #Footer { height: 100px; } h1 { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #665; font-weight: lighter; } h2 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; #665; } h6 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; font-size: 14px; } .StyleTxtField { border: 1px solid #665; border-radius: 6px; width: 200px; height: 35px; } .submenu { position: absolute; top: 45px; left:0; display:none; } .submenu li { display:block; float:none; padding:10px 0; } nav ul li:hover .submenu { display:block; } 

 <div id="Holder"> <div id="Header"> </div> <div id="NavBar"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a> <ul class="submenu"> <li>Save</li> <li>Update</li> <li>Delete</li> <li>Report</li> </ul> </li> </ul> </nav> </div> <div id="Content"> <div id="PageHeading">