下拉菜单显示在错误的位置

时间：2020-03-19 03:03:52

标签： html css drop-down-menu

我的网站上的下拉菜单有问题。每当我将鼠标悬停在div上方时，都会显示下拉菜单，该菜单的顶部不会显示在标题下方，而是显示在左侧。 this is where my drop-down appears (it is meant to be under Research)

如何更改代码以使其位于“研究”下方，并且只要将鼠标悬停在div上就不会显示。

谢谢

代码在这里

@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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp; </p>
<!-- TemplateEndEditable --></div>
  <div id="Description"></div>
  <div id="Footer"><strong>Contact</strong></div>
  <div id="Contact">
    <p>Created By: <a href="mailto:wrightsp3@mlc.vic.edu.au="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>

2 个答案:

答案 0 :(得分：0)

@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 a {
    display: inline-block;
}
.drop-down {
  position: relative;
  display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    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;
}

#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;
}


.dropdown a:hover + .dropdown-content {
    display: block;
    width: 100%;
    text-align: center;
    word-spacing: 0px;
}


.drop-down:hover > .dropdown-content {
    display: block;
    width: 100%;
    text-align: center;
    word-spacing: 0px;
}
<!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>
	
  
  <div class="drop-down">
    <a href="#" class="dropbtn">Research</a> 
	
    <div class="dropdown-content">
      <a href="PResearch.html">Primary</a>
      <a href="SResearch.html">Secondary</a>
    </div>
  </div>

	<a href="Feedback.html">Feedback   </a> 
	 <a href="Contact.html">Bibliography</a>
  </div>
  <div id="Content"><!-- TemplateBeginEditable name="Content" -->
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp; </p>
<!-- TemplateEndEditable --></div>
  <div id="Description"></div>
  <div id="Footer"><strong>Contact</strong></div>
  <div id="Contact">
    <p>Created By: <a href="mailto:wrightsp3@mlc.vic.edu.au="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>

答案 1 :(得分：0)

您在下拉菜单中遇到的问题是内容必须是“ Research”菜单项的子项，如果按原样构造，则不可能。使用适当的语义构建菜单将有很大帮助。

导航菜单应始终包装在<nav>元素（docs here）中，并且菜单项是使用<ul>和<li>元素（无序列表和列表项）构造的分别）。这是一个多层导航的基本示例，就像上面的内容一样：

<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>

正如您在上面看到的那样，“研究”下拉菜单是“研究”列表项中的另一个无序列表。然后，您可以设置下拉菜单的样式，以使其悬停在其父菜单项上。通过将父级位置设置为相对，绝对子级将默认与父级元素的左侧对齐。

.dropdown {
  position: relative;
}

.dropdown > ul {
  display: none;
  position: absolute;
}

.dropdown:hover > ul {
  display: block;
}

使用适当的语义还将改善SEO结果，帮助屏幕阅读器，并使您的代码更具可维护性。它还将有助于您自己的代码保持一致。希望这会有所帮助！

相关问题
最新问题