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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
nav ul li { 
 
\t list-style-type: none; 
 
\t float: left; 
 
\t display: block; 
 
\t width: 150px; 
 
\t height: 60px; 
 
\t text-align: center; 
 
\t line-height: 55px; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 17px; 
 
\t position:relative; 
 
} 
 
nav ul li a { 
 
\t text-decoration: none; 
 
\t color: #FFF; 
 
} 
 
nav ul li:hover { 
 
\t background-color: rgb(242,242,242); 
 
} 
 
nav ul li:hover a { 
 
\t display: block; 
 
\t color: #800000; 
 
} 
 

 
.navClass li:hover .submenu { 
 
\t opacity: 1; 
 
} 
 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#Holder { 
 
\t width: 980px; 
 
\t height: auto; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t margin-top: 21px; 
 
\t margin-bottom: 21px; 
 
} 
 
#Header { 
 
\t height: 70px; 
 
\t background-image: url(../assets/ntma.png); 
 
\t background-repeat: no-repeat; 
 
\t margin-bottom: 11px; 
 
} 
 
#NavBar { 
 
\t height: 60px; 
 
\t background-color: rgb(13,13,13); 
 
\t 
 
} 
 
#Content { 
 
\t height: auto; 
 
\t clear: both; 
 
\t overflow: auto; 
 
} 
 
#ContentLeft { 
 
\t width: 280px; 
 
\t float: left; 
 
\t padding-left: 11px; 
 
\t padding-top: 11px; 
 
} 
 
#PageHeading { 
 
\t height: auto; 
 
\t padding: 11px; 
 
} 
 
#ContentRight { 
 
\t width: 680px; 
 
\t float: right; 
 
} 
 
#Footer { 
 
\t height: 100px; 
 
} 
 
h1 { 
 
\t margin: 0; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t color: #665; 
 
\t font-weight: lighter; 
 
} 
 
h2 { 
 
\t margin: 0; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-weight: lighter; 
 
#665; 
 
} 
 
h6 { 
 
\t margin: 0; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-weight: lighter; 
 
\t font-size: 14px; 
 
} 
 
.StyleTxtField { 
 
\t border: 1px solid #665; 
 
\t border-radius: 6px; 
 
\t width: 200px; 
 
\t height: 35px; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    top: 45px; 
 
\t left:0; 
 
\t display:none; 
 
} 
 
.submenu li { 
 
\t display:block; 
 
\t float:none; 
 
\t padding:10px 0; 
 
} 
 
nav ul li:hover .submenu { 
 
\t 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> 
 
     \t <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">