내 탐색 바에 문제가 있습니다. (이미지 참조)

첫 번째 이미지는 dasktop의 일반적인 탐색 모음입니다. 두 번째 이미지는 모바일 용 탐색 표시 줄입니다.내 탐색 바에 문제가 있습니다. (이미지 참조)

문제는 데스크탑 디자인에서 마우스로 탐색 막대의 링크를 덮을 때 회색에서 내 링크로 연결되지 않을 때 주황색이됩니다.

이미지 1 : enter image description here

이미지 2 :이 achive 어떻게

enter image description here

이

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; 
     }

}

출처

2014-03-31 zajecsv

그것은 어쩌면 나,하지만 난 모든 이미지의 표시되지 않는 이유는 무엇입니까? – Mathlight

li 태그를 앵커 태그로 감싸는 것은 허용되지 않습니다. 이 변경 사항을 수용하기 위해 CSS를 정리해야합니다. – JRulle

ul 만 li를 포함해야합니다 여기 내 코드입니다.

당신이 CSS에서 다음 규칙에 원하는 당신은 얻을 수 있습니다

nav a:hover {color: red;}

출처

2014-05-01 19:17:24 katsampu

내 탐색 바에 문제가 있습니다. (이미지 참조)

답변

관련 문제