个人中心
gpt4 book ai didi

html - 水平菜单下的间隙

转载 作者：太空宇宙 更新时间：2023-11-04 02:49:17 24 4
gpt4 key购买 nike

我正在为我的大学作业制作一个 web 应用程序，我是 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 上找到，请查看并帮助我

最佳答案

请在您的 CSS 中添加:

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

关于html - 水平菜单下的间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33317428/

24 4 0
文章推荐： python - 时间数据与格式不匹配......即使它确实如此
文章推荐： c - 使用 radio.write() 发送小数；与阿杜诺
文章推荐： javascript - 对相似参数进行分组的逻辑
文章推荐： c - 使用 Lua C API 选择带有选择器字符串的嵌套值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com