1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Hover effect breaks when using addtoany.com

css/javascript hover effect breaks, addtoany

         

cssguy_2

3:43 pm on Jul 8, 2010 (gmt 0)

10+ Year Member



Oh, I got a good one. Thanks in advance for taking a look at this issue, it's an interesting one.

The issue is my cool CSS/jquery hover effect is breaking in IE (all versions) when I add this addtoany.com script: 

<script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>


Without it, if works just fine. Any push in the right direction would be helpful. Thanks all!

My HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RealID Inc</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/AC_RunActiveContent.js"></script>
<!--[if IE 6]> <style type="text/css"> img, div { behavior: url(iepngfix.htc) } </style> <![endif]-->
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/menu.js"></script>

</head>

<body>
<div id="menu_real">
 <ul class="menu_real">
  <li><a href="#" class="parent"><span>Section 1</span></a>
   <div><ul>
    <li><a href="#" class="parent"><span>Sub Item 1</span></a>
     <div><ul>
      <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
       </ul></div>
      </li>
      <li><a href="#"><span>Sub Item 1.2</span></a></li>
      <li><a href="#"><span>Sub Item 1.3</span></a></li>
      <li><a href="#"><span>Sub Item 1.4</span></a></li>
      <li><a href="#"><span>Sub Item 1.5</span></a></li>
      <li><a href="#"><span>Sub Item 1.6</span></a></li>
      <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
       </ul></div>
      </li>
     </ul></div>
    </li>
    <li><a href="#"><span>Sub Item 2</span></a></li>
    <li><a href="#"><span>Sub Item 3</span></a></li>
   </ul></div>
  </li>
<!--  <li><span><img src="images/nav_line2.gif" alt=" " /></span></li>-->
<li><a href="#" class="parent"><span>Employment</span></a>
   <div><ul>
    <li><a href="#" class="parent"><span>Sub Item 1</span></a>
     <div><ul>
      <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
       </ul></div>
      </li>
      <li><a href="#"><span>Sub Item 1.2</span></a></li>
      <li><a href="#"><span>Sub Item 1.3</span></a></li>
      <li><a href="#"><span>Sub Item 1.4</span></a></li>
      <li><a href="#"><span>Sub Item 1.5</span></a></li>
      <li><a href="#"><span>Sub Item 1.6</span></a></li>
      <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
       </ul></div>
      </li>
     </ul></div>
    </li>
    <li><a href="#"><span>Sub Item 2</span></a></li>
    <li><a href="#"><span>Sub Item 3</span></a></li>
   </ul></div>
  </li>
  
  
  <li><a href="#" class="parent"><span>Collections</span></a>
   <div><ul>
    <li><a href="#" class="parent"><span>Sub Item 1</span></a>
     <div><ul>
      <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
       </ul></div>
      </li>
      <li><a href="#"><span>Sub Item 1.2</span></a></li>
      <li><a href="#"><span>Sub Item 1.3</span></a></li>
      <li><a href="#"><span>Sub Item 1.4</span></a></li>
      <li><a href="#"><span>Sub Item 1.5</span></a></li>
      <li><a href="#"><span>Sub Item 1.6</span></a></li>
      <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
       <div><ul>
        <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
       </ul></div>
      </li>
     </ul></div>
    </li>
    <li><a href="#"><span>Sub Item 2</span></a></li>
    <li><a href="#"><span>Sub Item 3</span></a></li>
   </ul></div>
  </li> 
 </ul>
</div>

</body>
</html>



And the relevant CSS (style.css) 



#menu_real img {
/*padding:0;
margin:0;
font-size:0;
position:absolute;
top:10px;*/
/*vertical-align:middle;*/
}

#menu_real * {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 text-decoration: none;
}
div#menu_real {
position:relative;}
#menu ul.menu {
 white-space: nowrap;
}

/* Geometrical arrangement */
#menu_real ul.menu_real li {
 display: inline-block;
 height: 46px;
 position: relative;
}

#menu_real ul.menu_real li div {
 position: absolute;
 top: 43px;
 left: 0px;
}

#menu_real ul.menu_real li div div {
 position: absolute;
 top: -6px;
 left: 188px;
}

/* Escaping style for lower levels */
#menu_real ul.menu_real li div ul li {
 display: block;
 float: none;
 width: auto;
 height: auto;
}

/** Graphics **/

/* Horizontal sliding doors */
#menu_real ul.menu_real li a {
 padding-left: 14px;
 background-image: url("images/item1.png");
 background-repeat: no-repeat;
 background-position: left -1000px;
 display: inline-block;
 margin: 10px 2px;
}

#menu_real ul.menu_real li a span {
 padding-right: 14px;
 padding-left: 0px;
 background-image: url("images/item1.png");
 background-repeat: no-repeat;
 background-position: right -1000px;
 display: inline-block;
 height: 27px;
 line-height: 27px;
 cursor: pointer;
 border-right:1px solid #999999;
}

#menu_real ul.menu_real li:hover a {
 background-position: left -54px;
}

#menu_real ul.menu_real li:hover a span {
 background-position: right -81px;

}

/*The 2 CSS types below add a curved box around the first Menu nav*/
#menu_real ul.menu_real li.active a {
 /*background-position: left 0px;*/
}

#menu_real ul.menu_real li.active a span {
/*color: #FFFFFF;
 background-position: right -27px;*/
}

/* Escape Horizontal doors */
#menu_real ul.menu_real li div ul li a {
 display: block;
 padding: 0px;
 margin: 0px;
 background: none;
 border-right:none;
}

#menu_real ul.menu_real li div ul li a span {
 display: block;
 padding: 0px;
 background: none;
 height: auto;
 width: 165px;
 line-height: 25px;
 padding: 7px 0 7px 9px;
 white-space: normal; 
 border-right:none;
}

/* Vertical sliding doors */
#menu_real ul.menu_real li div { 
 width: 200px;
 padding-top: 6px;
 background-image: url("images/submenu-top.png");
 background-repeat: no-repeat;
 background-position: 0px top;
}

#menu_real ul.menu_real li div ul { 
 padding: 6px 6px 9px 6px;
 padding-top: 0;
 background-image: url("images/submenu-bottom.png");
 background-repeat: no-repeat;
 background-position: 0px bottom;
}

/* Hover Effect on Submenus */
#menu_real ul.menu_real ul li:hover
{

}
#menu_real ul.menu_real li.active ul li a span {
color:#000000;
width: 165px;
}
#menu_real ul.menu_real li.active ul li a span:hover {
color:#000000;}

#menu_real ul.menu_real ul li a span:hover
{
color:#000000; 
}


/* Main header line */
#menu_real {
 height: 46px;
 padding-left: 14px;
/* background:transparent url(images/bg.png) repeat-x;*/
}

/* Text shadow */
#menu_real span
{
color:#000000; 
}

#menu_real li:hover>a>span 
{

}

/* Fonts */
#menu_real ul.menu_real li a span
{ 
 font-family: Arial;
 font-size: 12px;
 font-weight: 600;
}

#menu_real ul.menu_real li div ul li a span
{ color:#000000; 
 font-family: Trebuchet MS;
 font-size: 12px;
 font-weight: 400;
}

/* Lines between li */
#menu_real ul.menu_real li div ul
{
 padding-bottom: 8px;
}

#menu_real ul.menu_real li div ul li:first-child
{
 border-top-width: 0px;
}


/* Menu logic */
#menu_real li>div { visibility: hidden; }
#menu_real li:hover>div { visibility: visible; }
/* */

/* Hover Effect on Submenus */
#menu_real ul.menu_real ul li:hover
{
/* background-color: #fff;*/
 background-color: #eeeeee;
}

/* Lines between li */
#menu_real ul.menu_real li div ul li
{
 background-image:url(images/hr.gif);
 background-repeat: repeat-x;
 background-position: left bottom;
}
#menu_real ul.menu_real ul a.parent {
 background: url(images/arrow.gif) no-repeat right center;
 margin-right: -1px;
}


/* ie7 */
#menu_real ul.menu_real li {
 *zoom: 1;
 *display: inline;
}

#menu_real ul.menu_real li a {
 *zoom: 1;
 *display: inline;
}

#menu_real ul.menu_real li a span {
 *zoom: 1;
 *display: inline;
}

/* IE6 */
#menu_real ul.menu_real li a {
 _background-image: url("images/item.gif");
}

#menu_real ul.menu_real li a span {
 _background-image: url("images/item.gif");
}

#menu_real ul.menu_real li div { 
 _background-image: url("images/submenu-top.gif");
}

#menu_real ul.menu_real li div ul { 
 _background-image: url("images/submenu-bottom.gif");
}

#menu_real ul.menu_real li a:hover {
 _background-position: left -54px;
}

#menu_real ul.menu_real li a:hover span {
 _background-position: right -81px;
 _color: #FFFFFF;
}
#menu_real ul.menu_real li li a:hover span {
 _color:#09C6F5; 
}

/* Menu logic for IE6 */
#menu_real div { _display: none; }
#menu_real div li:hover div { _visibility: visible;_display: block; }
#menu_real div li:hover li:hover div { _display: block; }
#menu_real div li:hover li:hover li:hover div { _display: block; }
/* */

tedster

8:37 pm on Jul 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello cssguy_2, and welcome to the forums.

That's a whole lot of code for others to wade through - usually you get better discussions by creating a shorter example that still demonstrates the problem. This much code just looks like a whole bunch of work.

When you say that IE "breaks" - how does it break?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026