Question

我正在为我的大学工作制作一个网络应用程序，我是HTML的初学者

我已经制作了一个列表，当我将鼠标悬停在它上面时，会显示一个带有一些按钮的水平下拉菜单。 This is the image of main list

但是当我将鼠标悬停时，列表下会出现一些不必要的差距。这在下面的图片中显示。 Pic of gap

这是我的index.html的代码

<html>
   <head>
      <title> IWB Product Management</title>
      <link rel = "stylesheet" type = "text/css" href = "css\css.css">
      </link>
      <style> </style>
      <script src = "js\javascript.js"></script>
      <script src = "js\canvasjs.min.js"></script>
   </head>
   <body id = "body">
      <header>
         <img src="images\webhead.jpg" /> <br/>
      </header>
      <nav>
      </nav>
      <section>
         <div id="na">
            <ul>
               <li>
                  <img src="images\productlifecycle.jpg"/>
                  <ul>
                     <li><input type = "button" id = "plc" value = "Introduction" onclick = "valueintroduction()"></input></li>
                     <li><input type = "button" id = "plc" value = "Growth" onclick = "valuegrowth()"></input></li>
                     <li><input type = "button" id = "plc" value = "Maturity" onclick = "valuematurity()"></input></li>
                     <li><input type = "button" id = "plc" value = "Decline" onclick = "valuedecline()"></input></li>
                     <li><label id = "labelplc"></label></li>
                  </ul>
               </li>
               <li>
                  <img src="images\companystrategy.jpg"/>
                  <ul>
                     <li><input type = "button" id = "cs" value = "Cost Leader" onclick = "valuecostleader()"></input></li>
                     <li><input type = "button" id = "cs" value = "Differentiation" onclick = "valuedifferentiation()"></input></li>
                     <li><input type = "button" id = "cs" value = "Focus" onclick = "valuefocus()"></input></li>
                     <li><label id = "labelcs"></label></li>
                  </ul>
               </li>
               <li>
                  <img src="images\economicphase.jpg"/>
                  <ul>
                     <li><input type = "button" id = "ep" value = "Expansion" onclick = "valueexpansion()"></input></li>
                     <li><input type = "button" id = "ep" value = "Boom" onclick = "valueboom()"></input></li>
                     <li><input type = "button" id = "ep" value = "Recession" onclick = "valuerecession()"></input></li>
                     <li><input type = "button" id = "ep" value = "Depression" onclick = "valuedepression()"></input></li>
                     <li><label id = "labelep"></label></li>
                  </ul>
               </li>
               <li>
                  <img src="images\futuresituation.jpg"/>
                  <ul>
                     <li><input type = "button" id = "fs" value = "Prospering World" onclick = "valueprosperingworld()"></input></li>
                     <li><input type = "button" id = "fs" value = "Crisis" onclick = "valuecrisis()"></input></li>
                     <li><input type = "button" id = "fs" value = "Business" onclick = "valuebusiness()"></input></li>
                     <li><label id = "labelfs"></label></li>
                  </ul>
               </li>
               <li>
                  <img src="images\manufacturingtechnique.jpg"/>
                  <ul>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 1" onclick = "CalculateChain1()"></input></li>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 2" onclick = "CalculateChain2()"></input></li>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 3" onclick = "CalculateChain3()"></input></li>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 4" onclick = "CalculateChain4()"></input></li>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 5" onclick = "CalculateChain5()"></input></li>
                     <li><input type = "button" id = "techchains" value = "Technology Chain 6" onclick = "CalculateChain6()"></input></li>
                     <li><label id = "labelmt"></label></li>
                  </ul>
               </li>
            </ul>
         </div>
         <input type = "button" id = "button" value = "Compare Chains" onclick = "CalculateComparison()"></input>
      </section>
      <aside>
      </aside>
      <footer>
      </footer>
      <div id = "content">   
      </div>
      <div id="">
      </div>
      <div id="chartContainer" style="height: 350px; width: 100%;">
      </div>
   </body>
</html>

我的css代码如下

 {
     margin: 0;
     padding: 0;
 }
 body {
     padding: 0px;
     font: 18px Arial;
     background-color: #203052;
     width: 1320px;
     margin: 0 auto;
     background-image: url('../images/factory.jpg');
     background-repeat: no-repeat;
     background-position: center top;
 }
 header {
     width: 1320px;
     margin: 0 auto;
     background-color: red;
 }
 section {
     width: 500px;
     overflow: auto;
     float: left;
     margin: 0 auto;
     text-align: center;
 }
 section ul {
     list-style-type: none;
     margin: 0px auto;
     padding: 0px;
     text-align: left;
 }
 section ul li {
     list-style-type: none;
     margin: 0px auto;
     padding: 0px;
 }
 section ul ul {
     display: none;
 }
 section ul ul li {
     display: inline-block;
 }
 section ul li:hover ul {
     display: inline-block
 }
 #plc {
     width: 60px;
     height: 125px;
 }
 #button {
     width: 150px;
     height: 50px;
 }
 aside {
     width: 952px;
     overflow: auto;
     color: blue;
     background-color: black;
     float: left;
 }
 #chartContainer {
     display: block;
     overflow: auto;
 }

整个页面的链接可在learnhtmlkiani.base.pk上找到。请查看并帮助我

Answer 1

您的代码存在一些错误。例如，一个id应该是唯一的，但是你在s s上重复它们。您正在使用应该使用类的ID。

此外，问题在于您的#plc按钮。

您应该删除该行

#plc { width: 60px; /* height: 125px; */ }

查看此fiddle以获取示例。

Answer 2

请加入你的CSS：

section #na > ul > li { position: relative; }
section #na > ul ul { position: absolute; }

Answer 3

上面的答案是正确的;您的代码有一些问题。要解决图像之间的差距，您需要使用display: block;。我转到了您提供的链接，并使用css将此属性添加到您的图像中 - 这解决了您的问题。

水平菜单下的差距

3 个答案: