下拉菜单出现在错误的位置

【问题标题】：Dropdown menu appearing in the wrong place下拉菜单出现在错误的位置
【发布时间】：2020-03-19 11:46:23
【问题描述】：

我的网站上的下拉菜单有问题。每当我将鼠标悬停在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>

【问题讨论】：

    标签： html css drop-down-menu


    【解决方案1】： 

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

    【讨论】：

      【解决方案2】：

      您在使用下拉菜单时遇到的问题是内容必须是“研究”菜单项的子项，这在按原样结构化时是不可能的。构建具有适当语义的菜单将大有帮助。

      导航菜单应始终包含在&lt;nav&gt; 元素（docs here）中，菜单项使用&lt;ul&gt; 和&lt;li&gt; 元素（分别为无序列表和列表项）构建。这是一个多层导航的基本示例，就像你上面的那样：

      <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 结果，帮助屏幕阅读器，并使您的代码更易于维护。它还有助于您自己的代码保持一致性。希望这会有所帮助！

      【讨论】：

        猜你喜欢
        • 2021-07-12
        • 2013-02-21
        • 1970-01-01
        • 2021-07-03
        • 2014-06-17
        • 2015-12-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode