CSS如何解决在左侧导航上的文字？

Question

我有一个左侧边栏，显示单击菜单按钮，该菜单按钮的分辨率<为1366x768，位于包含站点路径的div后面... 这就是我的意思：  未扩展的侧边栏https://imgur.com/qD0gTkP  扩展侧边栏https://imgur.com/JmhvpSD CSS是这样的：

#path{
background: #111111;
padding: 0;
color: white; 
font-size: x-small; 
font-weight: normal;
overflow: hidden;
text-decoration: none;
font-size: 12px; 
position: relative; }

#path ul {
display: block; 
padding: 0; 
margin:0;
list-style-type: none;
position: relative; 
z-index:100; 
overflow: hidden;
text-decoration: none;}


#sidenav{
    height: 100%;
      width: 0; 
      position: fixed; 
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111111; 
      overflow-x: hidden;
      padding-top: 60px; 
      transition: 0.5s; 
    }

我希望打开侧边栏时该路径不可见。

HTML：

<div id="mySidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <button class="dropdown-btn">A.S. 2018/19 
    <i class="fa fa-caret-down"></i>
  </button>
      <div class="materie">
  <a id="mate"class="skillsDoublet" href="matematica.html">MATE/FISICA <i class='fas fa-calculator' style='font-size:24px'></i></a>
  <a id="ita" class="skillsDoublet" href="italiano.html">ITALIANO <i class='fas fa-book-open' style='font-size:24px'></i></a>
  <a id="scienze" class="skillsDoublet" href="scienze.html">SCIENZE <i class='fas fa-flask' style='font-size:24px'></i></a>
  <a id="arte" class="skillsDoublet" href="arte.html">ARTE <i class='fas fa-paint-brush' style='font-size:24px'></i></a>
  <a id="inglese" class="skillsDoublet" href="inglese.html">INGLESE <i class='fas fa-flag-usa' style='font-size:24px'></i></a>
  <a id="filosofia" class="skillsDoublet" href="filosofia.html">FILOSOFIA <img src="progetto/img/think.png"></i></a>
  <a id="storia" class="skillsDoublet" href="storia.html">STORIA <img src="progetto/img/storia.png"></i></a>
  <a id="informatica" class="skillsDoublet" href="informatica.html">INFORMATICA <i class='fas fa-laptop-code' style='font-size:24px'></i></a>
    </div>
  <a CLASS="curr" href="curriculum.html">CURRICULUM</a>
</div>

<div id="path">
				<ul>
					<li><a href="index.html">Home</a> &gt;</li>
                    <li><a href="materie.html">Materie</a> &gt;</li>
					<li class="path-active">Arte</li>
				</ul>
			</div>