メニューの隣にあるテキストは、テキストが追加されたときにメニューを移動します。

Question

メニューの左側のテキストをメニューとやりとりしないようにしたいとします。私はそれにテキストを追加するたびに、私のメニューバーを横に移動します。どのようにそれを修正するための任意のアイデア？テキストの固定位置を試しましたが、そのバグは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="#">&#9776</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; 
} 

Answer 1

使用位置：代わりにフロートの絶対

span.nadpis { 
    position: absolute; 
    left: 0; 
} 

、フロート付き要素がまだ位置とその兄弟要素

に影響しますスペースの量所有する：絶対に、要素は、その兄弟要素