html - 菜单旁边的文本在添加更多文本时移动菜单

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

使用position:absolute而不是 float

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

对于float，该元素仍将拥有一定数量的空间，这将影响其兄弟元素

使用 position: absolute 时，元素会将自己与其兄弟元素分开放置