Member Avatar for 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>
  • 3 Contributors
  • 2 Replies
  • 149 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by asimegusta
Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.