Question

我的网站导航栏出现了一些问题。当下拉菜单变为可见时，导航栏的位置会发生变化。此外，在调整浏览器大小时，导航栏会发生变化。这不是我的意图。所以请有人帮帮我吗？我非常感激。

这是我使用的css代码。

/*main menu*/

.nav-top  {list-style:none;               
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
               position: relative; display:none; }

ul.nav-top li { display:inline-block;
                padding:40px; 
                margin-right:19px;
                position:relative;
}
ul.nav-top li:hover> ul { display:block; }

ul.nav-top li a { display:block;
    text-decoration:none; 
    border-bottom: 2px solid transparent; 
}

ul.nav-top a:hover{ color:#686A6A;
                    border-bottom:2px solid #E4E4E4;
 }


/*sub menu*/

ul.nav-top ul ul { clear:both;
border: solid 1px ffffff;  }

ul.nav-top li li {
    display:block;
 /* Introducing a padding between the li and the a give the illusion spaced items */
    padding:2px; padding-top:10px;
    } 
ul.nav-top ul ul li {   
}

ul.nav-top ul ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }

ul.nav-top ul ul li:hover a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none; background:#FFF; 

}
ul.nav-top ul ul li:hover a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
  color:#686A6A; border-bottom:2px solid #E4E4E4;   
}

Answer 1

谢谢你的回答。这是我的HTML：

</head>

<body>

<div id="header">

<img src="images/logo-marco-kaller.png">

    <ul class="nav-top">
    <li><a href="home.html">home</a></li>
    <li><a href="about.html">about</a></li>
    <li><a href="#">work</a>
        <ul>
             <li><a href="#">design</a></li> 
             <li><a href="#">paintings</a></li>   
             <li><a href="#">sculptures</a></li>           
        </ul>    
    <li><a href="shop.html">shop</a></li>
    <li><a href="news.html">news</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
</div>

 <div id="background"></div>


  <div class="wrapper">   

  <div id="content-background"><br>
 <h1>Marco Kaller</h1> 
 <p>Welkom op de site van Marco Kaller!</p>

  <div id="content">
  </div> 
  </div>
</div>

  <div id="footer">   
    <a href="#"><img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" /></a>

     <ul class="talen">
     <li>language:</li>
     <li><a href="#">en</a></li>
     <li><a href="#">nl</a></li>
     <li><a href="#">de</a></li>
     </ul>
       <hr class="faded" />
     </div>

使用下拉菜单时，为什么导航栏会改变位置？

1 个答案: