Solved

Link incorrect on hover

Posted on 2014-09-16
2
163 Views
Last Modified: 2014-09-16
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
0
Comment
Question by:Dzynit
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40325761
Set the correct width on #soclogos {} so there is enough room for all the icons. say about 350px
0
 
LVL 14

Author Closing Comment

by:Dzynit
ID: 40325779
Thanks much! It's always something simple overlooked.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Gulp not seeing Changes 4 39
Download a website to hdd 2 52
Put glyphicon in my input button 4 30
Best practice for a landing page 3 48
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now