Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 184
  • Last Modified:

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
0
Dzynit
Asked:
Dzynit
1 Solution
 
GaryCommented:
Set the correct width on #soclogos {} so there is enough room for all the icons. say about 350px
0
 
DzynitAuthor Commented:
Thanks much! It's always something simple overlooked.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now