css下拉菜单自适应

在设计网页时，下拉菜单是一个很常用的功能。下拉菜单的设计有多种方法，但是其中一种比较常见的方法是使用CSS。下面我们来看看如何使用CSS来创建自适应下拉菜单。

/* CSS 代码 */

nav{
  display:flex;
  justify-content:center;
}

ul{
  list-style:none;
  display:flex;
}

li{
  margin-right:20px;
}

a{
  text-decoration:none;
  color:#333;
  font-weight:bold;
  padding:10px;
}

ul.menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:10px;
  background:#fff;
  border:1px solid #333;
}

li:hover>ul.menu{
  display:block;
}

@media only screen and (max-width:768px){
  nav{
    flex-wrap:wrap;
  }
  ul{
    flex-basis:100%;
    display:block;
    margin:0;
    padding:0;
  }
  li{
    margin:0;
    border-top:1px solid #333;
  }
  li:last-of-type{
    border-bottom:1px solid #333;
  }
  li:hover>ul.menu{
    display:block;
    position:relative;
    top:0;
    margin-top:10px;
    border:0;
  }
} 

以上代码中，我们使用了Flex布局，通过设置“display:flex”和“justify-content:center”来让导航栏水平居中显示。我们还使用“list-style:none”和“margin-right:20px”来去除列表样式和给每个列表项添加右边距。

然后，我们给每个链接设置了一些基础样式，包括字体的颜色、加粗和内外边距。接着，我们使用了“ul.menu”来给下拉菜单添加样式，并将其隐藏。我们还给下拉菜单设置了“position:absolute”、“top:100%”和“left:0”，使它相对于父元素定位。

最后，我们使用了媒体查询来让下拉菜单自适应移动设备屏幕。在小屏幕上，我们取消了Flex布局和菜单项的右边距，并将下拉菜单变为块级元素，并且将其上下分隔线设置为边框。此外，我们还通过设置“position:relative”、“top:0”和“margin-top:10px”来调整下拉菜单的位置。

以上就是使用CSS创建自适应下拉菜单的方法。通过灵活运用CSS代码，可以更加方便地实现网页的设计效果。