1. 홈
  2. 질의 응답
  3. social icon 마우스를 가져다 대면 내 메뉴 막대에 드롭 다운 목록이 정렬됩니다.

social icon 마우스를 가져다 대면 내 메뉴 막대에 드롭 다운 목록이 정렬됩니다.

2016-08-04 1 views
1

내가 그들을 가리키면 소셜 미디어 아이콘의 색을 어떻게 바꿀 수 있습니까? 내 메뉴 막대에 드롭 다운 목록을 가운데 정렬하는 방법은 무엇입니까?social icon 마우스를 가져다 대면 내 메뉴 막대에 드롭 다운 목록이 정렬됩니다.

이

<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' /> 
 
<style> 
 
    /*crawlist.net CSS starts*/ 
 
    #ks-meno { 
 
    width: 100%; 
 
    height: 60px; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
    z-index: 100; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    box-shadow: 2px 2px 5px #28b418; 
 
    -moz-box-box-shadow: 2px 2px 5px #28b418; 
 
    -web-kit-box-shadow: 2px 2px 5px #28b418; 
 
    -goog-ms-box-shadow: 2px 2px 5px #28b418; 
 
    background: rgba(250, 250, 250, 0.95); 
 
    } 
 
    #ks-mano1 { 
 
    float: left; 
 
    width: 1000px; 
 
    height: 40px; 
 
    display: block; 
 
    padding: 0; 
 
    margin-left: 10px; 
 
    margin-top: 0px; 
 
    } 
 
    #ks-mano1 ul { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: #ffffff 1px hidden; 
 
    } 
 
    #ks-mano1 li { 
 
    float: left; 
 
    list-style: none; 
 
    line-height: 37px; 
 
    margin: 0; 
 
    padding: 0 background: #660252; 
 
    border: #660252 1px hidden; 
 
    } 
 
    #ks-mano1 li a, 
 
    #ks-mano1 li a:link { 
 
    color: #660252; 
 
    display: block; 
 
    margin: 0; 
 
    font-family: 'Nixie One', cursive; 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    border: #181818 1px hidden; 
 
    line-height: 25px; 
 
    } 
 
    #ks-mano1 li a:hover, 
 
    #ks-mano1 li a:active, 
 
    #ks-mano1 .current_page_item a { 
 
    color: #009F9A; 
 
    padding: 10px; 
 
    background: rgba(250, 250, 250, 0); 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    border: #6CF 1px hidden; 
 
    } 
 
    #ks-mano1 li li a, 
 
    #ks-mano1 li li a:link, 
 
    #ks-mano1 li li a:visited { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    background: #660252; 
 
    color: #fff; 
 
    width: 150px; 
 
    margin: 0; 
 
    padding: 0px 10px; 
 
    line-height: 30px; 
 
    position: relative; 
 
    border: #660252 1px solid; 
 
    } 
 
    #ks-mano1 li li a:hover, 
 
    #ks-mano1 li li a:active { 
 
    color: #fff; 
 
    border: #660252 1px solid; 
 
    background: #660252; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    #ks-mano1 li ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    left: -999em; 
 
    height: auto; 
 
    width: 170px; 
 
    margin: 0px; 
 
    padding: 0px 
 
    } 
 
    #ks-mano1 li:hover ul, 
 
    #ks-mano1 li li:hover ul, 
 
    #ks-mano1 li li li:hover ul, 
 
    #ks-mano1 li.sfhover ul, 
 
    #topks-mano1 li li.sfhover ul, 
 
    #topks-mano1 li li li.sfhover ul { 
 
    left: auto 
 
    } 
 
    #ks-mano1 li:hover, 
 
    #ks-mano1 li.sfhover { 
 
    position: static; 
 
    } 
 
    #ks-ico { 
 
    float: right; 
 
    width: 250px; 
 
    padding: 0px 0px; 
 
    margin-right: 50px; 
 
    } 
 
    #ks-ico img { 
 
    margin-left: 6px; 
 
    margin-top: 15px; 
 
    height: 28px; 
 
    width: 28px; 
 
    border: none; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    #ks-ico img:hover { 
 
    opacity: .8; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    /*crawlist.net CSS ends*/ 
 
</style> 
 
<!--crawlist.net nev starts--> 
 
<div id='ks-meno'> 
 
    <div id='ks-mano1'> 
 
    <ul> 
 
     <!--menu--> 
 
     <li> 
 
     <a href='www.theBIY.blogspot.com'> 
 
      <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" /> 
 
     </a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a> 
 
     <!--menu--> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='#'>DIY BEAUTY</a> 
 
      </li> 
 
      <li><a href='#'>DIY DECOR</a> 
 
      </li> 
 
      <li><a href='#'>DIY FASHION</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a> 
 
     <!--menu--> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
    </ul> 
 
    </div> 
 
    <div id='ks-ico'> 
 
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook"> 
 
     <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" /> 
 
    </a> 
 

 
    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest"> 
 
     <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" /> 
 
    </a> 
 

 
    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles"> 
 
     <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" /> 
 
    </a> 
 

 
    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin"> 
 
     <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" /> 
 
    </a> 
 

 
    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram"> 
 
     <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" /> 
 
    </a> 
 

 
    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed"> 
 
     <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" /> 
 
    </a> 
 
    </div> 
 
</div> 
 
<!--crawlist.net nev ends-->
(여기 내가 사용하는 HTML/CSS 코드입니다) 감사합니다 www.theBIY.blogspot.com (이 아직 공사중입니다) : 여기

내 웹 사이트의 링크입니다

출처

2016-08-04 Ou Ma

답변

0

사람들이 일반적으로하는 일은 2 개의 아이콘이 있고 완전히 다른 두 가지 색상, 1 개의 숨김 (대개 불투명도 : 0) 및 다른 가시성과 동일합니다. 한 호버는 불투명 0으로 이동하고 다른 불투명도 1은 일부 css3 애니메이션으로 이동합니다.

추가 도움을 받으려면 시도한 것에 대한 실제 코드를 제공해야합니다.

변화하는 색상은 다음과 같이해야합니다 (여기서 해결해야 할 많은 것들이 있지만 기본 사항입니다). 두 개의 이미지가있는 하나의 스팬과 "활성"이있는 스팬이 있으며, 마우스를 올리면 변경할 수 있습니다 불투명도.

이 다음과 같이 표시됩니다 ~ 그냥 여백 - 가기를 추가, (첫 번째 아이콘 : 내가 이해 희망 정렬

을 위해 만든 8px

/*crawlist.net CSS starts*/ 
 

 
#ks-meno { 
 
    width: 100%; 
 
    height: 60px; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
    z-index: 100; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    box-shadow: 2px 2px 5px #28b418; 
 
    -moz-box-box-shadow: 2px 2px 5px #28b418; 
 
    -web-kit-box-shadow: 2px 2px 5px #28b418; 
 
    -goog-ms-box-shadow: 2px 2px 5px #28b418; 
 
    background: rgba(250, 250, 250, 0.95); 
 
} 
 
#ks-mano1 { 
 
    float: left; 
 
    width: 1000px; 
 
    height: 40px; 
 
    display: block; 
 
    padding: 0; 
 
    margin-left: 10px; 
 
    margin-top: 0px; 
 
} 
 
#ks-mano1 ul { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: #ffffff 1px hidden; 
 
} 
 
#ks-mano1 li { 
 
    float: left; 
 
    list-style: none; 
 
    line-height: 37px; 
 
    margin-top: 8px; 
 
    padding: 0 background: #660252; 
 
    border: #660252 1px hidden; 
 
} 
 
#ks-mano1 li a, 
 
#ks-mano1 li a:link { 
 
    color: #660252; 
 
    display: block; 
 
    margin: 0; 
 
    font-family: 'Nixie One', cursive; 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    border: #181818 1px hidden; 
 
    line-height: 25px; 
 
} 
 
#ks-mano1 li a:hover, 
 
#ks-mano1 li a:active, 
 
#ks-mano1 .current_page_item a { 
 
    color: #009F9A; 
 
    padding: 10px; 
 
    background: rgba(250, 250, 250, 0); 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    border: #6CF 1px hidden; 
 
} 
 
#ks-mano1 li li a, 
 
#ks-mano1 li li a:link, 
 
#ks-mano1 li li a:visited { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    background: #660252; 
 
    color: #fff; 
 
    width: 150px; 
 
    margin: 0; 
 
    padding: 0px 10px; 
 
    line-height: 30px; 
 
    position: relative; 
 
    border: #660252 1px solid; 
 
} 
 
#ks-mano1 li li a:hover, 
 
#ks-mano1 li li a:active { 
 
    color: #fff; 
 
    border: #660252 1px solid; 
 
    background: #660252; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
} 
 
#ks-mano1 li ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    left: -999em; 
 
    height: auto; 
 
    width: 170px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    margin-left: -50px; 
 
} 
 
#ks-mano1 li:hover ul, 
 
#ks-mano1 li li:hover ul, 
 
#ks-mano1 li li li:hover ul, 
 
#ks-mano1 li.sfhover ul, 
 
#topks-mano1 li li.sfhover ul, 
 
#topks-mano1 li li li.sfhover ul { 
 
    left: auto 
 
} 
 
#ks-mano1 li:hover, 
 
#ks-mano1 li.sfhover { 
 
    position: static; 
 
} 
 
#ks-ico { 
 
    float: right; 
 
    width: 250px; 
 
    padding: 0px 0px; 
 
    margin-right: 50px; 
 
} 
 
#ks-ico a img { 
 
    margin-left: 6px; 
 
    margin-top: 15px; 
 
    height: 28px; 
 
    width: 28px; 
 
    border: none; 
 
    position: relative; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
} 
 
#ks-ico a:hover img.active { 
 
    opacity: 1; 
 
} 
 
#ks-ico img.active { 
 
    opacity: 0; 
 
    top:0; 
 
    position: absolute; 
 
} 
 
#ks-ico a span { 
 
display: inline-block; 
 
    position: relative; 
 
} 
 
#ks-ico a:hover img { 
 
    opacity: 0; 
 
} 
 
/*crawlist.net CSS ends*/
<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' /> 
 

 

 
<div id='ks-meno'> 
 
    <div id='ks-mano1'> 
 
    <ul> 
 
     <!--menu--> 
 
     <li> 
 
     <a href='www.theBIY.blogspot.com'> 
 
      <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" /> 
 
     </a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a> 
 
     <!--menu--> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='#'>DIY BEAUTY</a> 
 
      </li> 
 
      <li><a href='#'>DIY DECOR</a> 
 
      </li> 
 
      <li><a href='#'>DIY FASHION</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a> 
 
     <!--menu--> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
    </ul> 
 
    </div> 
 
    <div id='ks-ico'> 
 
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook"> 
 
     <span> 
 
     <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" /> 
 
     <img class="active" src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" /> 
 
</span> 
 
    </a> 
 

 
    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest"> 
 
     <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" /> 
 
    </a> 
 

 
    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles"> 
 
     <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" /> 
 
    </a> 
 

 
    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin"> 
 
     <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" /> 
 
    </a> 
 

 
    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram"> 
 
     <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" /> 
 
    </a> 
 

 
    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed"> 
 
     <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" /> 
 
    </a> 
 
    </div> 
 
</div> 
 
<!--crawlist.net nev ends-->

<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' /> 
 
<style> 
 
    /*crawlist.net CSS starts*/ 
 
    #ks-meno { 
 
    width: 100%; 
 
    height: 60px; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
    z-index: 100; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    box-shadow: 2px 2px 5px #28b418; 
 
    -moz-box-box-shadow: 2px 2px 5px #28b418; 
 
    -web-kit-box-shadow: 2px 2px 5px #28b418; 
 
    -goog-ms-box-shadow: 2px 2px 5px #28b418; 
 
    background: rgba(250, 250, 250, 0.95); 
 
    } 
 
    #ks-mano1 { 
 
    float: left; 
 
    width: 1000px; 
 
    height: 40px; 
 
    display: block; 
 
    padding: 0; 
 
    margin-left: 10px; 
 
    margin-top: 0px; 
 
    } 
 
    #ks-mano1 ul { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: #ffffff 1px hidden; 
 
    } 
 
    #ks-mano1 li { 
 
    float: left; 
 
    list-style: none; 
 
    line-height: 37px; 
 
    margin: 0; 
 
    padding: 0 background: #660252; 
 
    border: #660252 1px hidden; 
 
    } 
 
    #ks-mano1 li a, 
 
    #ks-mano1 li a:link { 
 
    color: #660252; 
 
    display: block; 
 
    margin: 0; 
 
    font-family: 'Nixie One', cursive; 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    border: #181818 1px hidden; 
 
    line-height: 25px; 
 
    } 
 
    #ks-mano1 li a:hover, 
 
    #ks-mano1 li a:active, 
 
    #ks-mano1 .current_page_item a { 
 
    color: #009F9A; 
 
    padding: 10px; 
 
    background: rgba(250, 250, 250, 0); 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    border: #6CF 1px hidden; 
 
    } 
 
    #ks-mano1 li li a, 
 
    #ks-mano1 li li a:link, 
 
    #ks-mano1 li li a:visited { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    background: #660252; 
 
    color: #fff; 
 
    width: 150px; 
 
    margin: 0; 
 
    padding: 0px 10px; 
 
    line-height: 30px; 
 
    position: relative; 
 
    border: #660252 1px solid; 
 
    } 
 
    #ks-mano1 li li a:hover, 
 
    #ks-mano1 li li a:active { 
 
    color: #fff; 
 
    border: #660252 1px solid; 
 
    background: #660252; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    #ks-mano1 li ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    left: -999em; 
 
    height: auto; 
 
    width: 170px; 
 
    margin: 0px; 
 
    padding: 0px 
 
    } 
 
    #ks-mano1 li:hover ul, 
 
    #ks-mano1 li li:hover ul, 
 
    #ks-mano1 li li li:hover ul, 
 
    #ks-mano1 li.sfhover ul, 
 
    #topks-mano1 li li.sfhover ul, 
 
    #topks-mano1 li li li.sfhover ul { 
 
    left: auto 
 
    } 
 
    #ks-mano1 li:hover, 
 
    #ks-mano1 li.sfhover { 
 
    position: static; 
 
    } 
 
    #ks-ico { 
 
    float: right; 
 
    width: 250px; 
 
    padding: 0px 0px; 
 
    margin-right: 50px; 
 
    } 
 
    #ks-ico img { 
 
    margin-left: 6px; 
 
    margin-top: 15px; 
 
    height: 28px; 
 
    width: 28px; 
 
    border: none; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    #ks-ico img:hover { 
 
    opacity: .8; 
 
    -webkit-transition: all .6s ease; 
 
    -moz-transition: all .6s ease; 
 
    -o-transition: all .6s ease; 
 
    -ms-transition: all .6s ease; 
 
    transition: all .6s ease; 
 
    } 
 
    /*crawlist.net CSS ends*/ 
 
</style> 
 
<!--crawlist.net nev starts--> 
 
<div id='ks-meno'> 
 
    <div id='ks-mano1'> 
 
    <ul> 
 
     <!--menu--> 
 
     <li> 
 
     <a href='www.theBIY.blogspot.com'> 
 
      <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" /> 
 
     </a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a> 
 
     <!--menu--> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='#'>DIY BEAUTY</a> 
 
      </li> 
 
      <li><a href='#'>DIY DECOR</a> 
 
      </li> 
 
      <li><a href='#'>DIY FASHION</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a> 
 
     <!--menu--> 
 
     </li> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a> 
 
     </li> 
 
     <!--menu--> 
 
     <!--menu--> 
 
     <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a> 
 
     <ul> 
 
      <!--submenu--> 
 
      <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a> 
 
      </li> 
 
      <!--submenu--> 
 
     </ul> 
 
     </li> 
 
     <!--menu--> 
 
    </ul> 
 
    </div> 
 
    <div id='ks-ico'> 
 
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook"> 
 
     <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" /> 
 
    </a> 
 

 
    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest"> 
 
     <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" /> 
 
    </a> 
 

 
    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles"> 
 
     <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" /> 
 
    </a> 
 

 
    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin"> 
 
     <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" /> 
 
    </a> 
 

 
    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram"> 
 
     <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" /> 
 
    </a> 
 

 
    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed"> 
 
     <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" /> 
 
    </a> 
 
    </div> 
 
</div> 
 
<!--crawlist.net nev ends-->

출처

2016-08-04 19:32:27

+0

빠른 답장을 보내 주셔서 감사합니다. 두 번째 세트를 삽입하는 방법을 모르는 두 세트의 아이콘이 있습니다. 여기 나는 포스트를 편집했다. 그것 좀 봐주세요 –

+0

좋아요, 이미 일부 애니메이션으로 불투명도가 변경되었습니다. 다른 색상을 원하면 다른 색상의 모든 소셜 아이콘에 대해 다른 img를 가져야합니다. (나는 당신의 코드에 또 다른 세트를 보지 못한다) 메뉴에서 어떤 정렬이 필요합니까? –

+0

어떤 코드를 사용해야하는지 모르기 때문에 여기에 세트를 포함시키지 않았습니다. –

관련 문제

 관련 문제