css实现菜单悬浮展开效果代码-html代码-BFW代码库

css实现菜单悬浮展开效果代码

代码语言：html

所属分类：悬停

代码描述：css实现菜单悬浮展开效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


<style>
@import url(//repo.bfw.wiki/bfwrepo/css/open-props.min.css);
  @import url(//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css);

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--gray-12);
}

ul {
  padding: 0;
  display: inline-grid;
  grid-auto-flow: column;
  list-style-type: none;
  grid-template-columns: auto repeat(3, calc((var(--active, 0) * 130px) + 10px));
  transition: grid-template-columns 0.35s var(--ease-elastic-1);
  transition: grid-template-columns 0.35s var(--ease-elastic-1), -ms-grid-columns 0.35s var(--ease-elastic-1);
}

main {
  width: 66ch;
}

li {
  display: grid;
  justify-content: end;
  z-index: calc(var(--count) - var(--index));
}

nav {
  position: relative;
}

nav > button {
  position: absolute;
  left: 0;
  background: red;
  z-index: var(--count);
}

a {
  background: hsl(0 0% 60% / 0.18);
  display: inline-block;
  padding: var(--size-2) var(--size-4);
  border-ra.........完整代码请登录后点击上方下载按钮下载查看