The issue you are running into with the dropdown menu is the content needs to be a child of the “Research” menu item, which isn’t possible when it is structured as it is. Building the menu with proper semantics will significantly help.
A navigation menu should always be wrapped in a <nav> element (docs here) with the menu items being constructed using <ul> and <li> elements (unordered list and list item respectively). Here is a basic example of a multi layer navigation like what you have above:
<nav>
<ul>
<li><a href='...'>Home</a></li>
<li class='dropdown'>
<a href='#'>Research</a>
<ul>
<li><a href='...'>Primary</a></li>
<li><a href='...'>Secondary</a></li>
</ul>
</li>
<li><a href='...'>Bio</a></li>
</ul>
</nav>
As you can see above, the “Research” dropdown menu is another unordered list inside the “Research” list item. You can then style the dropdown to show when it’s parent menu item is hovered over. By setting the parents position to relative, absolute children will default to aligning with the left of the parent element.
.dropdown {
position: relative;
}
.dropdown > ul {
display: none;
position: absolute;
}
.dropdown:hover > ul {
display: block;
}
Using proper semantics will also improve SEO results, assist screen readers, and make your code much more maintainable. It will also help with consistency in your own code. Hope this helps!
I am having a problem with a dropdown menu on my website. Whenever I hover my mouse over the div the drop-down will appear, on top of that the drop-down menu doesn’t appear under the title, it appears on the left.
this is where my drop-down appears (it is meant to be under Research)
How can I change the code to make it underneath ‘Research’ and not appear whenever I just hover my mouse over the div.
Thanks
Here is the Code
@charset "utf-8";
#Container {
background-color: #051622;
font-size: x-large;
font-style: normal;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 400;
margin-left: 0px;
list-style-type: none;
}
#Container #Header {
color: #DEB992;
font-family: advent-pro;
font-style: normal;
font-weight: 400;
text-align: center;
font-size: 80px;
word-spacing: 0px;
letter-spacing: 5px;
text-shadow: 3px 3px #A5896C;
margin: 0;
padding-bottom: 0px;
}
#Container #Content {
color: #DEB992;
margin-left: 100px;
margin-right: 100px;
font-size: 18px;
font-family: aubrey;
font-style: normal;
font-weight: 400;
text-align: center;
width: auto;
height: auto;
left: 0px;
right: 0px;
list-style-type: none;
}
#Container #Description {
color: #DEB992;
margin-bottom: -50px;
list-style-type: none;
}
#Container #Footer {
color: #1BA098;
font-family: aubrey;
font-style: normal;
font-weight: 400;
font-size: medium;
text-align: center;
background-color: #092D47;
width: auto;
}
#Container #Contact {
color: #DEB992;
text-align: center;
font-family: aubrey;
font-style: normal;
font-weight: 400;
font-size: small;
background-color: #051927;
width: auto;
}
body {
background-color: #051622;
}
.dropbtn {
background-color: #051622;
color: #1ba098;
padding: 0px;
font-size: 40px;
border: none;
cursor: pointer;
font-family: aubrey;
font-style: normal;
font-weight: 400;
text-align: center;
text-shadow: 1px 1px #0F5D58;
word-spacing: 30px;
} */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #051622;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: aubrey;
font-style: normal;
font-weight: 400;
text-shadow: 1px 1px #116661;
text-align: center;
font-size: 30px;
float: right;
word-spacing: 0px;
}
.dropdown-content a {
color: #1ba098;
padding: 0px;
text-decoration: none;
display: block;
font-family: aubrey;
font-style: normal;
font-weight: 400;
text-shadow: 1px 1px #126E68;
text-align: center;
word-spacing: 0px;
}
.dropdown-content a:hover {
background-color: #0B304B;
text-align: center;
word-spacing: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
text-align: center;
word-spacing: 0px;
}
#Container .dropdown {
font-family: aubrey;
font-style: normal;
font-weight: 400;
color: #1BA098;
text-align: center;
font-size:40px;
text-shadow: 1px 1px #0F5D58;
word-spacing: 30;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Driving1Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {
color: #1BA098;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #1BA098;
}
a:hover {
text-decoration: none;
color: #52E1D9;
}
a:active {
text-decoration: none;
color: #10635E;
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/ewert:n4:default;advent-pro:n4,n1:default;aubrey:n4:default;andika:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div id="Container">
<div id="Header">
<table width="1100" height="0" border="0">
<tr>
<td height="184"><img src="../../../../../../wrightsp3/OneDriv/10C 2020/Digital Technology/SustainableDriving-Site/Images/Sustainable Driving2.png" width="182.8" height="182.1" alt=""/></td>
<td><p>SUSTAINABLE DRIVING</p></td>
</tr>
</table>
</div>
<div class="dropdown">
<a href="index.html">Home</a>
<button class="dropbtn">Research</button>
<div class="dropdown-content">
<a href="PResearch.html">Primary</a>
<a href="SResearch.html">Secondary</a>
</div>
<a href="Feedback.html">Feedback </a>
<a href="Contact.html">Bibliography</a>
</div>
<div id="Content"><!-- TemplateBeginEditable name="Content" -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- TemplateEndEditable --></div>
<div id="Description"></div>
<div id="Footer"><strong>Contact</strong></div>
<div id="Contact">
<p>Created By: <a href="mailto:[email protected]="feedback"">Sarita Wright</a> </p>
<p>Creation Date: February 17, 2020 </p>
<p>Last Updated:<!-- #BeginDate format:Am1 -->March 19, 2020<!-- #EndDate -->
->
-> </p>
</div>
</div>
</body>
</html>
