Link incorrect on hover

On this site: http://www.gordontraining.com/ you can see the social icons top right when you hover over each icon a link or set of links shows below them in list form. I've just added the last two icons (pinterest and google+) but when hovering, both are showing the rss icon's link instead of their own.
The social images are all one single image and css is used to show the links. Another program originally created that, so I'm having trouble finding the correct css edit to get the right links to show.
Below is the css that controls that:
.social { background: transparent; clear: both; display: block; float: left; padding: 0; position: relative; }
.social ul { clear: both; display: block; float: left; margin-left: 30px; padding: 0; }
.social ul li { border-radius: 8px; clear: none; cursor: pointer; display: block; float: left; height: 40px; margin: 0; padding: 0; width: 40px; -moz-transition:0.2s; -ms-transition:0.2s; -o-transition:0.2s; -webkit-transition:0.2s; transition:0.2s; }
.social ul li b { background: url(https://www.gordontraining.com/wp-content/themes/gordon/images/social-icons-new.png) no-repeat 0 0; border: none; clear: none; display: block; float: left; height: 0; margin: 0; overflow: hidden; padding: 40px 80px 0 4px; width: 32px; }
.social ul li.twitter b { background-position: -80px 5px; }
.social ul li.facebook b { background-position: 0 5px; }
.social ul li.linkedin b { background-position: -40px 5px; }
.social ul li.youtube b { background-position: -120px 5px; }
.social ul li.rss b { background-position: -200px 5px; }
.social ul li.pinterest b { background-position: -240px 5px; }
.social ul li.googleplus b { background-position: -280px 5px; }




.social ul li ul { display: none; }
.social ul li:hover ul { background-color: #fff;border-radius: 3px;box-shadow: 0 2px 10px #999;clear: both;display: block;float: left;left: 20px;margin: 0;padding: 3px 0;position: absolute;top: 50px;width: 190px;z-index: 10000; }
.social ul li ul li { background-color: #fff;clear: both;cursor: default;display: block;float: left;height: auto;margin: 0;padding: 0;width: 190px; }
.social ul li ul li a { background-color: #fff;border-top: #b2cfe2 dotted 1px;clear: both;display: block;float: left;margin: 0;padding: 5px 10px;text-decoration: none;width: 170px; }
.social ul li ul li:first-child a { border: none; }
.social ul li:hover ul li a:hover { background-color: #cde3ef; }

Open in new window

Could I get a fresh pair of eyes to help with this please?
Thanks, Heather
LVL 14
DzynitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Set the correct width on #soclogos {} so there is enough room for all the icons. say about 350px
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DzynitAuthor Commented:
Thanks much! It's always something simple overlooked.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.