我的導航欄有問題。 （見圖）

Question

第一張圖片是dasktop的正常導航欄。第二個圖像是移動導航欄。

問題是，在桌面設計中，我無法實現這一點，當我用鼠標在導航欄中隱藏鏈接時，我不會從我的灰色鏈接變成橙色。

圖片1：

圖片2：

我如何實現這一目標？這裏是我的代碼：

HTML：

  <nav> 
       <ul> 
        <span class="lijeviLinkovi"> 
         <a href="#"><li>NASLOVNA</li></a> 
         <a href="#"><li>DESTINACIJE</li></a> 
         <a href="#"><li>O NAMA</li></a> 
         <a href="#"><li>KONTAKT</li></a> 
        </span> 
        <span class="desniLinkovi"> 
         <a class="login" href="#"><li>LOGIN</li></a> 
         <a class="reg" href="#"><li>REGISTRIRAJ SE</li></a> 
        </span> 
        <ul class="jeziciUL"> 
         <li> <a href="#"> HR </a> </li> 
         <li> <a href="#"> IT </a> </li> 
         <li> <a href="#"> EN </a> </li> 
         <li> <a href="#"> DS </a> </li> 
        </ul> 

        <ul class="drustveneMrezeUL"> 
         <li> <a href="#"> <img src="img/f_icon.gif"/> </a> </li> 
         <li> <a href="#"> <img src="img/t_icon.gif"/> </a> </li> 
         <li> <a href="#"> <img src="img/g_icon.gif"/> </a> </li> 
        </ul> 
       </ul> 
       <div class="handle"><img src="img/menu_siva1.gif"/></div> 
      </nav> 

CSS：

.navigacijaKont{ 
    float: left; 
    margin: 0 auto; 
    width: 100%; 
    background: url(img/bcg_nav_siva.gif) repeat; 
} 

.navigacijaKont a{ 
    text-decoration: none; 
    text-shadow: 2px 2px #fff; 
    font-size: 87.5%; 
} 

    .navigacijaKont ul{ 
     list-style: none; 
     margin: 0 auto; 
     padding: 0; 
    } 

     .ulLijevo { 
      float: left; 
     } 

     .ulLijevo a li{ 
      float: left; 
      display: inline; 
      padding: 14px 30px; 
      border-right: 1px solid #fff; 
      color: #636363; 
      background: url(img/bcg_nav_siva.gif) repeat; 
     } 

     .ulLijevo a li:hover{ 
      background: url(img/bcg_nav.gif) repeat; 
     } 

     .ulDesno { 
      float: right; 
     } 

     .ulDesno a li{ 
      float: left; 
      display: inline; 
      padding: 14px 30px; 
      color: #f48222; 
      font-weight: bold; 
      background: url(img/bcg_nav_siva.gif) repeat; 
     } 

     .ulDesno a li:hover{ 
      background: url(img/bcg_nav.gif) repeat; 
     } 

媒體查詢：

@media screen and (max-width: 450px){ 

.tijelo { 
background-color: red; 
} 

    .vjfKont{ 
     display: none; 
    } 

.navigacijaKont{ 
    background: none; /*url(img/bcg_nav_siva.gif) repeat*/ 
} 

.navigacijaKont a{ 
    font-size: 100%; 

} 

     .ulLijevo { 
      float: left; 
      margin: 0 auto; 
     } 

     .ulLijevo a li{ 
      float: left; 
      display: inline-block; 
      padding: 14px 0px; 
      border-right: none; 
      color: #636363; 
      background: url(img/bcg_nav_siva.gif) repeat; 
      width: 115%;     
     } 

     .ulLijevo a li:hover{ 
      background: url(img/bcg_nav.gif) repeat; 
     } 

     .ulDesno { 
      float: left; 
      margin: 0 auto; 
     } 

     .ulDesno a li{ 
      float: left; 
      display: inline-block; 
      padding: 14px 0px; 
      color: #f48222; 
      font-weight: bold; 
      width: 210%; 
      background: url(img/bcg_nav_siva.gif) repeat; 
     } 

     .ulDesno a li:hover{ 
      background: url(img/bcg_nav.gif) repeat; 
     } 

}

Answer 1

ul只能包含li。

你可以達到你想要在CSS以下規則集的內容：

nav a:hover {color: red;}