Question

我一直试图弄清楚如何修复此下拉菜单。它似乎看起来没问题，直到我悬停，菜单显示水平而不是垂直。这是不是css有问题？

感谢您的帮助！

HTML

<body> 
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
 <ul style="list-style: none;">
      <li><a href="../index.html">Home</a></li>
      <li><a href="../research.htm">Research</a></li>
      <li><a href="../susantaylor.htm">Susan Taylor</a></li>
      <li><a href="../LaboratoryMembers.html">Lab Members</a>
          <ul>
                <li><a href="../currentmembers.htm">Current Members</a></li>
                <li><a href="../formermembers.htm">Former Members</a></li>
                <li><a href="../gallery.htm">Gallery</a></li>
          </ul>
      </li>
      <li><a href="../publications.htm">Publications</a></li>
      <li><a href="../links.htm">Links</a></li>
      <li><a href="../contact.htm">Contact Us</a></li>
</ul>
  </nav>

  <br>
 </br>
<div id= "content" align="center"> 
<br>
<div id="content-spacer-top"> </div>
    <div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" --  >EditRegion3<!-- TemplateEndEditable --></div>
   <div id="content-space bottom"></div>

</div>
<footer class="footer" id="footer">
  <div align="center">
  <p>Taylor Laboratory<br> 
      Leichtag Biomedical Research Building
      4th Floor, Room 412
    <br>
    University of California, San Diego
    <br>
    9500 Gilman Dr. mc0654<br>
  La Jolla, CA 92093
  <br>
  Ph: (858) 534-8190
  <br>
  Fax: (858) 534-8193 </p>
</div>
</footer>


</div>


</body>

CSS li ul { 显示：无; }

li:hover ul{
  display:block;
}
body {
    margin: 0px;
    background-color: #CCCCCC;
}
.content {
    background-color: #FFFFFF;
    padding-right: 6px;
    padding-left: 6px;
}
.footer {
    background-color: #357f7f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    color: #FFFFFF;
    position: absolute;
}
#content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    height: auto;
}


a {
    text-decoration: none;
}
#wrapper {
    background-color: #FFFFFF;
    width: 1280px;
    min height: 100%;
    position: relative;
    height: auto;
    min-height: 100%
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
 }
#content-spacer-top {
    height: 10px;
}

#content-spacer-bottom{
    height:1%;
}

#header {
    background-color: #357f7f;
    height: 2%;
    width: 100%;
}
#mainnav a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
    float: left;
    text-align: center;
    width: 14.28%;
    padding-top: 6px;
    padding-right: 0px;
    padding-bottom: 6px;
    padding-left: 0px;
    display: block;
    list-style-type: none;
    clear: none;
    margin: 0px;
    height: 2%;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #357F7F;
    border-right-color: #357F7F;
    border-bottom-color: #357F7F;
    border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}

Answer 1

好的，所以在看了你的更新小提琴后，我能够立刻看到问题。首先你的代码非常混乱（对不起，但它是哈哈）你有很多不必要的CSS声明。

写得太糟了，我刚刚写了一个全新的小提琴，包括一个工作的导航栏。找到下面的相关代码。

<强> HTML：

<nav>
     <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="../research.html">Research</a></li>
          <li><a href="../susantaylor.html">Susan Taylor</a></li>
          <li><a href="../LaboratoryMembelrs.html">Lab Members</a>
              <ul>
                    <li><a href="../currentmembers.html">Current Members</a></li>
                    <li><a href="../formermembers.html">Former Members</a></li>
                    <li><a href="../gallery.html">Gallery</a></li>
              </ul>
          </li>
          <li><a href="../publications.html">Publications</a></li>
          <li><a href="../links.html">Links</a></li>
          <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</nav>

<强> CSS：

nav {
    display: table;
    border-top: 1px solid #357F7F;
    border-bottom: 1px solid #357F7F;
}
nav ul {
    display: table-row;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
}
nav ul a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
    position: relative;
    display: inline-block;
    display: table-cell;
    width: 1%;
    list-style-type: none;
    text-align: center;
}
nav ul li:hover {
    background-color: #357F7F;
}
nav ul li:hover a {
    color: white;
}
nav ul ul{
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.4);
    width: 100%; 
}
nav ul ul li {
    width: 100%;
    display: inline-block;
}
nav ul li:hover > ul {
    display: block;
}

<强> JSFiddle

希望这有帮助！：）

下拉菜单水平而不是垂直

1 个答案: