Problem with navigation / dropdown

[Simon_4]

Hi There

I have a bit problem with my navigation, or the dropdown of it. If I hover an a element, the other just move around... I do not know how to fix it. Here is my css code:

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup ul {
  position: absolute;
  top: 0px;
  left: -9999px;
  margin: 0;
  padding: 9px 0;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  min-width: 167px;
  width: 99%;
  background-color: white; }
div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup ul li {
  /*cursor: pointer; */
  display: block;
  float: left;
  width: 200px;
}

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup ul li a {
  /*padding: 4.5px 0 4.5px 20px;
  width: 200px;*/
  text-decoration: none; }

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup ul li:hover {
  background-color: #FFFFFF;
  text-decoration: none; }

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup ul li:hover a {
  /*color: white;
  width: 200px;*/ }

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup:hover, div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup.navigationHover {
  background: transparent url(https://images-na.ssl-images-amazon.com/images/I/211QXE2os9L.jpg) repeat-x scroll left top;
  z-index: 500; }

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup:hover ul, div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup.navigationHover ul {
  top: 39px;
  left: 0; }

div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav {
  background-color: white;
  background-image: none;
  min-height: 30px;
  border-top: none;
  border-left: none;
  border-right: none; }

And here I have some html code:

<ul class="linkList navigationLinks" id="globalNav">

    <li class="navigationGroup" id="globalNavItem1">









                <a href="http://www.outdoorequipped.com/Main-Brands/b/8076402011?ie=UTF8&title=Main+Brands" class="mainNode">
                        <span>Main Brands</span>
                </a>






  <ul class="linkList navigationLinks">

      <li>


                                <a href="http://www.outdoorequipped.com/2XU-Main-Brands/b/9578871011?ie=UTF8&title=2XU">
                                        <span>2XU</span>
                                </a>








      </li>

      <li>


                                <a href="http://www.outdoorequipped.com/adidas-Main-Brands/b/8403837011?ie=UTF8&title=adidas">
                                        <span>adidas</span>
                                </a>








      </li>

      <li>


                                <a href="http://www.outdoorequipped.com/Alegria-Main-Brands/b/10127149011?ie=UTF8&title=Alegria">
                                        <span>Alegria</span>
                                </a>








      </li>
      </ul>
      </ul>

[JorgeM]

Based on the html and css you provided in this sample, i'm unable to reproduce what you are describing. The styles arent event appplying because you are targetting ID's that do not exist in the code sample above.

[asimegusta]

If on hover something "just move around" then compare padding px between li and li:hover. They could be "moving" a few pixels when you hover due to differences.