Я хочу, чтобы мой текст в левой части меню не взаимодействовал с моим меню. Каждый раз, когда я добавляю текст, он перемещает мои строки меню в сторону. Любая идея, как это исправить? Я пробовал фиксированную позицию для текста, но его багги и не работает в Mozilla Firefox.Текст рядом с меню, перемещающим меню, когда добавляется больше текста
JsFiddle: https://jsfiddle.net/3vetp3y3/
HTML:
<nav>
<span class="nadpis"> <a href="javascript:history.go(0)">BUR</a> </span>
<ul class="nav">
<li class="prve"><a href="#">PSI</a>
<ul>
<li><a href="flvmena/meno1.html">Simoncik</a></li>
<li><a href="flvmena/meno2.html">Kodrla</a></li>
<li><a href="flvmena/meno3.html">Vajs</a></li>
<li><a href="flvmena/meno4.html">Hrebicek</a></li>
</ul>
</li>
<li class="druhe"><a href="#">☰</a>
<ul>
<li> <a href="index.html">RPO</a> </li>
<li> <a href="flv.html"> FLV </a>
<ul>
<li><a href="flvmena/meno1.html">Simoncik</a></li>
<li><a href="flvmena/meno2.html">Kodrla</a></li>
<li><a href="flvmena/meno3.html">Vajs</a></li>
<li><a href="flvmena/meno4.html">Hrebicek</a></li>
</ul>
</li>
<li> <a href="flc.html"> FLC </a>
<ul>
<li><a href="flcmena/meno1.html">Bednarikova</a></li>
<li><a href="flcmena/meno2.html">Dobrikova</a></li>
<li><a href="flcmena/meno3.html">Duracka</a></li>
</ul>
</li>
<li> <a href="qua.html"> QUA </a>
<ul>
<li><a href="quamena/meno1.html">Klco</a></li>
<li><a href="quamena/meno2.html">Cisar</a></li>
</ul>
</li>
<li> <a href="hfx.html"> HFX </a>
</li>
<li> <a href="pdt.html"> PDT </a>
</li>
<li> <a href="rsh.html"> RSH </a>
</li>
<li> <a href="bur.html" style="background-color:#474646;color: #40d23b"> BUR </a>
</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;
}
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;
}
.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;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.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;
}
Не могли бы вы добавить текст на скрипку и связать эту версию, как так что мы можем увидеть, где вы пытаетесь поместить текст, который создает проблему? – JBartus