0

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>
3
Contributors
2
Replies
16
Views
2 Years
Discussion Span
Last Post by asimegusta
0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.