Currently working on a school assessment, and one of the requirements is to ensure that the website functions properly in both Chrome and Firefox. While my pages are functional in both browsers, I have encountered an issue with my navigation buttons specifically in Firefox. Upon testing, I receive the error message "protocol (h) is not associated with any program or is not allowed in this context" along with a suggestion to install additional software to open the address.
Below is the code I am using:
<div id="menu">
<a href="H:/documents/200dts/web_design/scoville_scale/index.html">Home</a>
<div class="dropdown">
Content
<div class="dropdown-content">
<a href="H:/documents/200dts/web_design/scoville_scale/pages/scoville_scale.html">The Scoville Scale</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
</div>
<a href="#">About Us</a>
<a href="#">Gallery</a>
</div>
Here is the CSS accompanying the aforementioned code:
/* Navigation Bar */
#menu {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: #2f040c;
}
#menu a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#menu a:hover {
color: grey;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #2f040c;
min-width: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: grey;
padding: 16px 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}