Fred007 Fred007 - 4 months ago 7
CSS Question

Menu different in chrome browser

for some reason my menu bar (its fixed) is in 2 lines in chrome browser and normal in all other browsers. Any idea why or how to fix it? I tried to figure it out but i didnt fix it. Is it a problem with browser default block height or what? I need to make it work on chrome and on all other browsers too.

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;
}


Thanks for help

Answer

This doesn't seem like a browser issue. You have .nav set to display: inline-block; but nothing on the two inner <li> elements to force them onto the same line.

I added this:

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

And it works for me in Chrome. See here:

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