Question

由于某种原因，我的菜单栏（已修复）在Chrome浏览器中有两行，在所有其他浏览器中都是正常的。知道为什么或如何解决它？我试图解决它，但我没有解决它。这是浏览器默认块高度的问题还是什么？我需要让它在chrome和所有其他浏览器上运行。

JsFiddle：https://jsfiddle.net/wkupr9L6/1/

HTML：

  <script>
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 65) {
        $("nav").css("opacity", "0.2");
}
     else {
        $("nav").css("opacity", "1");
    }   
});

  </script>
 </head>

 <body>
<!--MENU BAR!-->
  <nav class="navig">
  <span class="nadpis"> <a href="javascript:history.go(0)"> RPO </a> </span>
   <ul class="nav">
    <li class="prve"><a href="#">Dátumy</a>
     <ul>
      <li><a href="#">1-7/7/2016</a>
       <ul>
        <li><a href="#172016">1/7/2016</a></li>
        <li><a href="#272016">2/7/2016</a></li>
        <li><a href="#372016">3/7/2016</a></li>
        <li><a href="#472016">4/7/2016</a></li>
        <li><a href="#572016">5/7/2016</a></li>
        <li><a href="#672016">6/7/2016</a></li>
        <li><a href="#772016">7/7/2016</a></li>
       </ul>
      </li>
      <li><a href="#">8-14/7/2016</a>
       <ul>
        <li><a href="#872016">8/7/2016</a></li>
        <li><a href="#972016">9/7/2016</a></li>
        <li><a href="#1072016">10/7/2016</a></li>
        <li><a href="#1172016">11/7/2016</a></li>
        <li><a href="#1272016">12/7/2016</a></li>
        <li><a href="#1372016">13/7/2016</a></li>
        <li><a href="#1472016">14/7/2016</a></li>
       </ul>
      </li>
      <li><a href="#">15-21/7/2016</a>
       <ul>
        <li><a href="#">15/7/2016</a></li>
        <li><a href="#">9/7/2016</a></li>
        <li><a href="#">10/7/2016</a></li>
        <li><a href="#">11/7/2016</a></li>
        <li><a href="#">12/7/2016</a></li>
        <li><a href="#">13/7/2016</a></li>
        <li><a href="#">14/7/2016</a></li>
       </ul>
      </li>         
     </ul>
    </li>
    <li class="druhe"><a href="#">&#9776</a>
     <ul>
      <li> <a href="flv.html"> FLV </a> 
       <ul>
        <li><a href="flvmena/meno1.html">meno1 </a></li>
        <li><a href="flvmena/meno2.html">meno2 </a></li>
        <li><a href="flvmena/meno3.html">meno3 </a></li>
        <li><a href="flvmena/meno4.html">meno4 </a></li>
        <li><a href="flvmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="flc.html"> FLC </a> 
       <ul>
        <li><a href="flcmena/meno1.html">meno1 </a></li>
        <li><a href="flcmena/meno2.html">meno2 </a></li>
        <li><a href="flcmena/meno3.html">meno3 </a></li>
        <li><a href="flcmena/meno4.html">meno4 </a></li>
        <li><a href="flcmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="qua.html"> QUA </a> 
       <ul>
        <li><a href="quamena/meno1.html">meno1 </a></li>
        <li><a href="quamena/meno2.html">meno2 </a></li>
        <li><a href="quamena/meno3.html">meno3 </a></li>
        <li><a href="quamena/meno4.html">meno4 </a></li>
        <li><a href="quamena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="hfx.html"> HFX </a> 
       <ul>
        <li><a href="hfxmena/meno1.html">meno1 </a></li>
        <li><a href="hfxmena/meno2.html">meno2 </a></li>
        <li><a href="hfxmena/meno3.html">meno3 </a></li>
        <li><a href="hfxmena/meno4.html">meno4 </a></li>
        <li><a href="hfxmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="pdt.html"> PDT </a> 
       <ul>
        <li><a href="pdtmena/meno1.html">meno1 </a></li>
        <li><a href="pdtmena/meno2.html">meno2 </a></li>
        <li><a href="pdtmena/meno3.html">meno3 </a></li>
        <li><a href="pdtmena/meno4.html">meno4 </a></li>
        <li><a href="pdtmena/meno5.html">meno5 </a></li>
       </ul></li>
      <li> <a href="rsh.html"> RSH </a> 
       <ul>
        <li><a href="rshmena/meno1.html">meno1 </a></li>
        <li><a href="rshmena/meno2.html">meno2 </a></li>
        <li><a href="rshmena/meno3.html">meno3 </a></li>
        <li><a href="rshmena/meno4.html">meno4 </a></li>
        <li><a href="rshmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="bur.html"> BUR </a> 
       <ul>
        <li><a href="burmena/meno1.html">meno1 </a></li>
        <li><a href="burmena/meno2.html">meno2 </a></li>
        <li><a href="burmena/meno3.html">meno3 </a></li>
        <li><a href="burmena/meno4.html">meno4 </a></li>
        <li><a href="burmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="suhrn.html" style="color: #ea9b54">SUHRN</a> </li>
      <li> <a href="inci.html" style="color: #ea9b54"> INCI </a> </li>
      <li> <a href="jira.html" style="color: #ea9b54"> JIRA </a> </li>
      <li> <a href="chgt.html" style="color: #ea9b54"> CHGT </a> </li>
      <li> <a href="task.html" style="color: #ea9b54"> TASK </a> </li>
      <li> <a href="vrs.html" style="color: #ea9b54"> VRS </a> </li>
      </div>
     </ul>
    </li>
   </ul>
  </nav>

CSS：

body, nav ul  {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav {    
  display: inline-block;
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: #111;
  vertical-align: top;
  top: -1px;
  opacity: 1;
  transition: 0.3s;
}

nav:hover {
    opacity: 1!important;
    background-color: #111;
    transition: 0.3s;

}

.nav a {
  display: block; 
  background: #111; 
  color: #fff;
  text-decoration: none;
  padding: 0.7em 1.7em;
  text-transform: uppercase;
  font-size: 85%;
  letter-spacing: 3px;
  position: relative;
}

.nav{  
  vertical-align: top; 
  display: inline-block;
}

.nav li {
  position: relative;
}

.nav > li { 
  float: left; 
  margin-right: 1px; 
} 

.nav li:hover > a { 
  transition: 0.3s;
  background-color:#3a3939;
  color: #40d23b; 
}

 .nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  background-color: #000;
  border: 2px solid #81D4FA;
  border-top: none;
}
.nav > li:hover > ul {
  left: auto;
  min-width: 100%;
}

.nav > li li:hover > ul { 
  left: 100%;
  top:-1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;  
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  right: 10px;
}

.prve{
  max-width:125px;
  min-width: 90px;
  border: 2px solid #81D4FA;
  border-bottom: none;
  border-top: none;
}

.druhe {
  max-width: 14px;
  min-width: 110px;
  border-right: 2px solid #81D4FA;
}
    span {
    float:left;
    margin-left: 3px;
}
span a{
    text-decoration: none;
    color:#2670CF;
    background-color:#111;
    font-family: 'Helvetica Neue', sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
}

感谢您的帮助

Answer 1

这似乎不是浏览器问题。您已将.nav设置为display: inline-block;，但两个内部<li>元素上没有任何内容可强制它们放在同一行上。

我补充说：

.nav > li { 
  display: inline-block;
}

它在Chrome中适用于我。见这里：

https://jsfiddle.net/tobyl/wkupr9L6/6/

Chrome浏览器中的菜单不同

1 个答案: