css导航栏下拉显示且占位置

CSS导航栏下拉显示且占位置是一种常见的网站导航栏设计，可让用户更方便地浏览和使用网站的各个功能模块，同时也能美化网站界面。

.nav {
  position: relative; /*将导航栏设置为相对定位*/
  display: inline-block;
}

.dropdown-menu {
  display: none; /*下拉菜单默认隐藏*/
  position: absolute; /*将下拉菜单设置为绝对定位*/
  top: 100%; /*将下拉菜单向下移动一个菜单项的高度*/
  left: 0; /*下拉菜单左对齐*/
}

.nav:hover .dropdown-menu {
  display: block; /*鼠标悬停于导航栏时显示下拉菜单*/
}

/* 下拉菜单样式 */
.dropdown-menu li {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #fff;
  border: solid 1px #ddd;
  padding: 10px;
}

以上是一个简单的CSS代码实现导航栏下拉菜单的例子。首先，我们将导航栏设置为相对定位，然后将下拉菜单设置为绝对定位，并向下移动一个菜单项的高度。下拉菜单默认隐藏，当鼠标悬停于导航栏时，将其显示。此外，我们还可以给下拉菜单设置样式，如菜单项的背景色、边框等。

需要注意的是，由于下拉菜单是绝对定位的，如果没有设置父元素的宽度，下拉菜单的宽度将默认为父元素的宽度。因此，我们需要给导航栏设置display: inline-block或其他块级别的属性，以让其占据一定宽度。