用我的代碼編輯過，但還是不行。

我設計我的HTML水平菜單時沒有使用ul或li，現在我需要添加一個子下拉菜單。

使用下面的代碼示例，我需要在& quot鏈接2 & quot和& quot鏈接3 & quot。

超文本標記語言

<!--header code starts here-->  

<a class="btn" href="homepage"><i class="fa fa-home"></i></a>
<a class="active"  href="index.html">Index</a>
<a class="active3" href="Updates">Updates</a>
<!--dropdowncode starts -->

<div class="dropdown">
<button class="dropbtn">Business Updates
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
  <a href="Link1.htm">Buisness Plans</a>
  <a href="Link2.htm">Link2</a>
  <a href="submenu.htm">Submenu Link 1<i class="fa fa-caret-right"></i></a>
  <div class="dropdown-content2">               
  <a class href="Submenu2.htm">Submenu Link2</a>
  <a href="Submenu3.htm">Submenu Link 3</a>
  <a href="Submenu4.htm">Submenu Link 4</a>
  <a href="Submenu5.htm">Submenu Link 5</a>
 </div>
  <a href="Link3.htm">Link3</a>
  <a href="Link4.htm">Link4</a>
  <a href="Link5.htm">Link5</a>
  <a href="Link6.htm">Link6</a> 
  <a href="Link7.htm">Link7</a>
  <a href="Link8.htm">Link8</a>
  </div>
  </div>

<div class="dropdown">
<button class="dropbtn">Construction Updates
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
  <a href="#">Buisness Plans</a>
  <a href="Link2.htm">Link2</a>
  <a href="Link3.htm">Link3</a>
  <a href="Link4.htm">Link4</a>
  <a href="Link5.htm">Link5</a>
  <a href="Link6.htm">Link6</a> 
  <a href="Link7.htm">Link7</a>
  <a href="Link8.htm">Link8</a>
  </div>
  </div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

* MENU CODE STARTS*/

/* BUTTON*/

.btn {
  background-color: #333;
  float: left;
  border: none;
  color: white;
  padding: 8px 16px;
  font-size: 22px;
  cursor: pointer;
}
.search {
  background-color: #333;
  float: right;
  border: none;
  color: white;
  padding: 8px 16px;
  font-size: 22px;
  cursor: pointer;
}
    /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  color: #006666;
  font-weight: bold;
  font-family: helvetica, verdana, arial, helvetica, sans-serif;        
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 12px;
  font-family: helvetica, verdana, arial, helvetica, sans-serif;    
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  font-family: helvetica, verdana, arial, helvetica, sans-serif;    
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #0B6121;
  color: white;
}
    ul.a {
  list-style-type: none;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

/* Add a color to the OTHER active/current link */
.topnav a.active2 {
  background-color: #006666;
  color: white;
}
    ul.a {
  list-style-type: none;
}

ul.b {
  list-style-type: none;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}


    ul.a {
  list-style-type: none;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}


  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Helvetica;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button INHERIT COLOR */
.dropdown .dropbtn {
  font-size: 12px;
  font-family: helvetica, verdana, arial, helvetica, sans-serif;
  font-weight: bold;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}




/* Add a darkgrey background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: darkgrey;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Dropdown content (hidden by default) */
.dropdown-content2 {
  display: none;
  position: absolute;
  margin-top: 0px;
  margin-left: 320px; 
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Text Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content2 {
  display: block;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
    }
.fa-caret-right{
 float:right;
    }

你可以試試這個:

/* Dropdown Button */

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
  overflow: grow;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#Link-2-content {
  position: relative;
  left: 30%;
  display: none;
}

#Link-2:hover+#Link-2-content,
#Link-2-content:hover {
  display: inline-block;
}

#Link-2-content:hover+.dropdown {
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#" id="Link-2">Link 2</a>
    <div id="Link-2-content">
      <a> Lorem ipsum </a>
      <a href=#> Lorem ipsum </a>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>