文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >chrome浏览器中的不同菜单

问chrome浏览器中的不同菜单
EN

Stack Overflow用户
提问于 2016-07-25 03:28:45
回答 1查看 73关注 0票数 0

由于某些原因，我的菜单栏(它的修复)在chrome浏览器中是2行，在所有其他浏览器中都是正常的。你知道为什么或者如何修复它吗？我试着弄明白它，但我没有解决它。是浏览器默认的区块高度有问题吗？我需要让它在chrome和所有其他浏览器上工作。

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

HTML：

代码语言：javascript
复制
  <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：

代码语言：javascript
复制
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; 
}

感谢你的帮助

html
css
google-chrome
browser
menu
EN

Stack Overflow用户

回答已采纳

发布于 2016-07-25 04:33:41

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

我添加了以下内容：

代码语言：javascript
复制
.nav > li { 
  display: inline-block;
}

它适用于我在Chrome上的应用。请看这里：

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

票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38555917

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档