Выпадающее меню в 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">