Hi all,
Can anyone expand on this lesson link below but to add a submenu in the menu as well? I cannot get this to work. I need a submenu between links 2 and 3. I can get the submenu to show all the time, but not be active upon hover of Link 2. When a user hovers on Link 2, another submenu should pop out to the right with more dropdown links. Where have I gone wrong here?
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
My HTML
<!--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>
<!--header code ends -->
CSS
/* 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;
}
