Social Icon Hover und zentriere die Dropdown-Liste in meiner Menüleiste

Können Sie mir bitte sagen, wie kann ich die Farbe der Social Media Icons ändern, wenn ich über sie schwebe? und wie kann ich die Dropdown-Liste in meiner Menüleiste zentrieren?Social Icon Hover und zentriere die Dropdown-Liste in meiner Menüleiste

hier ist Link meiner Website: www.theBIY.blogspot.com (noch im Bau ist)

danke (hier ist der HTML/CSS-Codes I verwendet)

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

Quelle

2016-08-04 Ou Ma

Was Menschen normalerweise tun, ist 2 Symbole, genau das gleiche mit zwei verschiedenen Farben, 1 versteckt (in der Regel durch Opazität: 0) und die andere sichtbar. Hover auf einem geht Opazität 0 und die andere Opazität 1, mit einigen CSS3-Animation.

Wenn Sie weitere Hilfe benötigen, müssen Sie uns den tatsächlichen Code von dem, was Sie versucht haben, zur Verfügung stellen.

Für die wechselnde Farbe sollten Sie so etwas tun (Es gibt viele Dinge zu beheben, aber das ist die grundlegende) - Sie haben 1 span mit zwei Bildern, eines mit "aktiv", und bei Hover Sie ändern die Opazität.

Dies wird wie folgt aussehen: (nur für das erste Symbol gemacht :)

Für die Ausrichtung Ich hoffe, ich verstehe, fügen Sie einfach margin-top ~ 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-->

Quelle

2016-08-04 19:32:27

danke für die schnelle Antwort. Ich habe zwei Icons. Ich weiß einfach nicht, wie ich den zweiten Satz einfügen soll. hier habe ich den Beitrag bearbeitet. bitte sieh es dir an –

ok, du hast also bereits eine Opazitätsänderung mit etwas Animation, wenn du eine andere Farbe willst, musst du ein anderes img für jedes soziale Symbol mit einer anderen Farbe haben. (Ich sehe kein anderes Set auf Ihrem Code) Welche Ausrichtung benötigen Sie im Menü? –

Ich habe den Satz hier nicht aufgenommen, da ich nicht wusste, welche Codes ich verwenden soll. –

Social Icon Hover und zentriere die Dropdown-Liste in meiner Menüleiste

Antwort

Verwandte Themen