Question

几年前，我从长期丢失的在线资源中删除了我的下拉菜单，在全尺寸屏幕上可以正常使用。我将其保存为单独的html文件，然后将该文件包含在站点的每个页面上，因此，仅在站点更改时才需要修改一个文件。

减小屏幕宽度时，菜单会下降到两行。没问题，但是当您将鼠标悬停在第一行上时，您将无法访问菜单项-向下移动光标时，您将鼠标悬停在第二行上的按钮上，并那个然后显示菜单。您可以自己了解我的意思here。我已经尝试过从答案到类似问题的几种解决方案，但是都没有成功。如果有人对可行的解决方案有任何建议，我将不胜感激。谢谢！

页面调用一个CSS文件，其相关代码为：

ul, ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
    list-style-type: none;
}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

下拉菜单文件中的相关代码为：

<style>
ul a{display:block; color:#333; text-decoration:none; line-height:32px; width:110px; padding:0 15px; text-align:center }
ul li{  position:relative;  float:left; margin:0;   padding:0}
ul li a:link{
    background: #000000;
    color: #BAE7E7
}
ul li a:hover {
    background-image: url(images/Tab_background.jpg);
    background-repeat: repeat-x;
    width: 110px;
}
ul ul{  display:none;   position:absolute;  top:100%;   left:0; background:#fff; padding:0}
ul ul li{   float:none; width:110px}
ul ul a{    line-height:120%;   padding:10px 15px}
ul ul ul{   top:0;  left:100%}
ul{ list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    }

<!--ul li:hover > ul{
    display: block;
    background-color: #FFF;
    background-image: url(file:///C|/Dreamweaver_websites/pictures/Tab_background.jpg);
    color: #FFF;
}
The hilite code-->
body.home  ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
   background-color: #000 ;  }
a:link {
    color: #80FFFF;
    text-decoration: none;
}
a:visited {
    color: #81BBF5;
    text-decoration: none;
}
a:hover {
    color: #3F9;
    text-decoration: none;
}
a:active {
    color: #0CC;
    text-decoration: none;
}


</style>
</head>
<body link="#82BCFD" class="link">
<DIV>
<ul>
<li><a href="Home.shtml">Miramodus </a></li>
  <li ><a href="ourmodels.shtml">Our Models</a>
    <ul>
      <li><a href="range.shtml">Range</a></li>
      <li><a href="Examples.shtml">Examples</a>
            <ul>
              <li><a href="teaching_models.shtml">Teaching molecular models</a></li>
              <li><a href="Inorganic_structure_models.shtml">Inorganic structure models</a></li>
              <li><a href="Inorganic_molecular_models.shtml">Inorganic molecular models</a></li>
              <li><a href="Mineral_structure_models.shtml">Mineral structure models</a></li>
              <li><a href="organic_molecular models.shtml">Biological and Organic Molecular Models</a></li>
              <li><a href="maths.shtml">Mathematical models</a></li>
              <li><a href="crystallography_models.shtml">Crystallographic models</a></li>
              <li><a href="Protein_models.shtml">Protein molecular models</a></li>
           </ul>  </li>
      <li><a href="Standard_colours.shtml">Colours</a></li>
      <li><a href="#">Colour selector</a>
      <li><a href="price_estimator.php">Price estimator</a>
    </ul>
  </li>  


  <li><a href="Standard_models.shtml">Standard models</a>
    <ul>
      <li><a href="Alphabetic_index.shtml">Alphabetic list</a></li>
      <li><a href="Search_database.php">Search catalogue</a></li>
      <li><a href="Protein_models.shtml">Proteins</a></li>
    </ul>
  </li> 


   <li><a href="Custom_built_molecular_models.shtml">Custom Builds</a>
       <ul>
          <li><a href="extra_features.shtml">Extra features</a></li>
          <li><a href="3d_printed.shtml">3d Printed Models</a></li>
          <li><a href="brass_molecular_models.shtml">Brass molecular models</a></li>
          <li><a href="Perspex_molecular_models.shtml">Perspex molecular models</a></li>
       </ul>
   </li>


  <li><a href="Giant_molecular_models.shtml">Giant Models</a>
    <ul>
      <li><a href="static_giant_molecular_models.shtml">Static models</a></li>
      <li><a href="Detachable_giant_molecular_models.shtml">Detachable models</a></li>
      <li><a href="#">Other large models</a></li>
    </ul>
  </li>


<li><a class="contact" href="Contact_form.shtml">Contact Us</a>
     <ul>
      <li><a href="Contact_form.shtml">Contact form</a></li>
      <li><a href="Aboutus.shtml">About us</a></li>
      <li><a href="contact_information.shtml">Contact information</a></li>
      <li><a href="ordering.shtml">Ordering</a>
            <ul>
             <li><a href="Order_form.shtml">Order form</a></li>
             <li><a href="#">Pay online</a>
             <li><a href="terms.shtml">Terms</a>
           </ul>
      </li>    
    </ul>
  </li>
</li>
</ul>
</div>

</body>
</html>

Answer 1

将z-index:1;设置为低于UL，如下所示，同时检查更新的代码段：

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  z-index:1;/*newly added*/
}

ul a {
  display: block;
  color: #333;
  text-decoration: none;
  line-height: 32px;
  width: 110px;
  padding: 0 15px;
  text-align: center
}

ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

ul li a:link {
  background: #000000;
  color: #BAE7E7
}

ul li a:hover {
  background-image: url(images/Tab_background.jpg);
  background-repeat: repeat-x;
  width: 110px;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  z-index:1;
}

ul ul li {
  float: none;
  width: 110px
}

ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

ul ul ul {
  top: 0;
  left: 100%
}

ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

<!--ul li:hover>ul {
  display: block;
  background-color: #FFF;
  background-image: url(file:///C|/Dreamweaver_websites/pictures/Tab_background.jpg);
  color: #FFF;
}

The hilite code-->body.home ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
  background-color: #000;
}

a:link {
  color: #80FFFF;
  text-decoration: none;
}

a:visited {
  color: #81BBF5;
  text-decoration: none;
}

a:hover {
  color: #3F9;
  text-decoration: none;
}

a:active {
  color: #0CC;
  text-decoration: none;
}

</head>

<body link="#82BCFD" class="link">
  <DIV>
    <ul>
      <li><a href="Home.shtml">Miramodus </a></li>
      <li><a href="ourmodels.shtml">Our Models</a>
        <ul>
          <li><a href="range.shtml">Range</a></li>
          <li><a href="Examples.shtml">Examples</a>
            <ul>
              <li><a href="teaching_models.shtml">Teaching molecular models</a></li>
              <li><a href="Inorganic_structure_models.shtml">Inorganic structure models</a></li>
              <li><a href="Inorganic_molecular_models.shtml">Inorganic molecular models</a></li>
              <li><a href="Mineral_structure_models.shtml">Mineral structure models</a></li>
              <li><a href="organic_molecular models.shtml">Biological and Organic Molecular Models</a></li>
              <li><a href="maths.shtml">Mathematical models</a></li>
              <li><a href="crystallography_models.shtml">Crystallographic models</a></li>
              <li><a href="Protein_models.shtml">Protein molecular models</a></li>
            </ul>
          </li>
          <li><a href="Standard_colours.shtml">Colours</a></li>
          <li><a href="#">Colour selector</a>
            <li><a href="price_estimator.php">Price estimator</a>
        </ul>
        </li>


        <li><a href="Standard_models.shtml">Standard models</a>
          <ul>
            <li><a href="Alphabetic_index.shtml">Alphabetic list</a></li>
            <li><a href="Search_database.php">Search catalogue</a></li>
            <li><a href="Protein_models.shtml">Proteins</a></li>
          </ul>
        </li>


        <li><a href="Custom_built_molecular_models.shtml">Custom Builds</a>
          <ul>
            <li><a href="extra_features.shtml">Extra features</a></li>
            <li><a href="3d_printed.shtml">3d Printed Models</a></li>
            <li><a href="brass_molecular_models.shtml">Brass molecular models</a></li>
            <li><a href="Perspex_molecular_models.shtml">Perspex molecular models</a></li>
          </ul>
        </li>


        <li><a href="Giant_molecular_models.shtml">Giant Models</a>
          <ul>
            <li><a href="static_giant_molecular_models.shtml">Static models</a></li>
            <li><a href="Detachable_giant_molecular_models.shtml">Detachable models</a></li>
            <li><a href="#">Other large models</a></li>
          </ul>
        </li>


        <li><a class="contact" href="Contact_form.shtml">Contact Us</a>
          <ul>
            <li><a href="Contact_form.shtml">Contact form</a></li>
            <li><a href="Aboutus.shtml">About us</a></li>
            <li><a href="contact_information.shtml">Contact information</a></li>
            <li><a href="ordering.shtml">Ordering</a>
              <ul>
                <li><a href="Order_form.shtml">Order form</a></li>
                <li><a href="#">Pay online</a>
                  <li><a href="terms.shtml">Terms</a>
              </ul>
              </li>
          </ul>
          </li>
          </li>
    </ul>
  </div>

</body>

</html>

如何使我的下拉菜单跨越两行？

1 个答案: