CSS의 드롭 다운 메뉴 - 썸네일

나는 아래의 메뉴를 가지고 있고, 나는 다음과 같이 왼쪽에 미리보기 이미지를 추가 할 추가하는 방법 :CSS의 드롭 다운 메뉴 - 썸네일

enter image description here
http://i.imgur.com/aK5EJ.jpg

이 가능에게 CSS로 할; 나는 그물 주위에 검색을 해봤지만 엄지 손톱으로 CSS 메뉴를 찾지 못했습니다.

어떤 도움

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
      <title>Menu</title> 
      <style type="text/css"> 

      body { 
      behavior: url(csshover.htc); 
      font-size:11px; 
      font-family:Arial, Helvetica, sans-serif; 
      } 

      #nav { 
      position:absolute; 
      left:700px; 
      top:10px; 
      } 

      p a { 
      color: #000; 
      text-decoration:underline!important; 

      } 
      a{ 
      color:#000; 
      text-decoration:none; 
      } 
      p a:hover{ text-decoration: none!important; 
      } 

      ul#nav { 
      list-style: none; 
      padding: 0; 
      margin: 0; 
      } 


      ul#nav li a { 
      display: block; 
      font-weight: bold; 
      padding: 2px 10px; 
      background:#f9f9f9; 
      } 

      ul#nav li a:hover{ 
      background:#888; 
      color:#fff; 
      list-style:none; 
      } 

      li { 
      float: left; 
      position: relative; 
      width: 100px; 
      text-align: center; 
      margin-right:5px; 
      border:1px solid #ccc; 

      } 

      ul#nav li.current a{ 
      background:#ddd; 
      } 

      ul#nav li.current a:hover{ 
      background:#888; 
      } 

      li ul { 
      display: none; 
      position:absolute; 
      width:100px; 
      top: 18px; 
      left: 0; 
      font-weight: normal; 
      padding: 1px 0 10px 0; 
      margin-left:-1px; 
      } 

      ul#nav li ul.sub li{ 
      border-width:0 1px 1px 1px!important; 
      } 

      ul#nav li ul.sub li a{ 
      font-weight: normal!important; 
      } 
      li>ul { 
      top: auto; 
      left: auto; 
      } 

      li:hover ul, li.over ul { 
      display: block; 
      } 

      .sub li { 
      list-style:none; 
      } 


      </style> 
      </head> 

      <body> 


      <ul id="nav"> 

       <li><a href="#" title="Menu">Menu</a> 
        <ul class="sub"> 
        <li><a href="#" title="Services > Number One">Number One</a></li> 
        <li><a href="#" title="Services > Number Two">Number Two</a></li> 
        <li><a href="#" title="Services > Number Three">Number Three</a></li> 
        <li><a href="#" title="Services > Number Four">Number Four</a></li> 
        <li><a href="#" title="Services > Number Five">Number Five</a></li> 
        </ul> 
       </li> 



      </ul> 

      </body> 
      </html>

출처

2011-10-07 BobJIII

물론 가능합니다. 미리보기 이미지를 앵커 태그의 배경 이미지로 만드세요. http://jsfiddle.net/EyRFW/1

ul#nav li ul.sub li a 
{ 
    font-weight: normal!important; 
    padding-left:20px; 
    background-image:url(http://jsfiddle.net/img/ico-add-resource.png); 
    background-position: 3px 3px ; 
    background-repeat:no-repeat; 
}

출처

2011-10-07 14:58:00

감사를 사용하십시오! – BobJIII

1) 감사하는) 플로트와 위치를 제외하고는 태그 (안 LI 당신의 스타일을 마십시오. 다른 선언을 A 태그로 옮기십시오.

2) A 태그에 왼쪽 패딩을 사용하고 배경 이미지를 사용하십시오. 패딩을 이미지와 동일한 너비와 텍스트를위한 약간의 숨쉴 공간으로 만듭니다.

몇 가지 스타일링 팁은 "맞춤식 글 머리 기호": http://preview.moveable.com/JM/ilovelists/을 참조하십시오.

출처

2011-10-07 14:52:10

는 CSS 속성이있다 :이 예를 참조하면 도움이 될 수

list-style-image: { };

, 당신은 적합하지 않을 수 있습니다 각 li에 대한 별도의 클래스를 정의 할 필요가 거라고하지만, 순전히 CSS를 통해 목록에 이미지를 추가 할 수 있어야합니다.

당신은 당신의 답변을 예를 들어, 다음과 같이

li.myimage { list-style-image: url("img/myimage.png"); }

출처

2011-10-07 15:28:01 dougajmcdonald

CSS의 드롭 다운 메뉴 - 썸네일

답변

관련 문제