个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 08:14:13 24 4
gpt4 key购买 nike

我的网站导航栏有些问题。当下拉菜单可见时，导航栏的位置会发生变化。此外，在调整浏览器大小时，导航栏也会发生变化。这当然不是我的本意。那么有人可以帮助我吗？我将不胜感激。

这是我正在使用的 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;   
}

最佳答案

感谢您的回答。这是我的 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>

关于css - 为什么在使用下拉菜单时导航栏会改变位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29089245/

24 4 0
文章推荐： css - 需要CSS技巧来解决这个问题
文章推荐： c++ - WSARecv 在套接字编程窗口中执行大约需要 3 秒？
文章推荐： c++ - bullseye 代码覆盖率浏览器没有所有的源文件？
文章推荐： c++ - 在 64 位操作系统中运行的 32 位应用程序可以寻址的不同内存的数量是多少？