<template>
<div class="home">
<div>
<ul class="first">
<li class="menu">我是一级菜单
<ul class="second">
<li>我是二级菜单</li>
<li>我是二级菜单</li>
<li>我是二级菜单</li>
</ul>
</li>
<li>我是一级菜单</li>
<li>我是一级菜单</li>
<li>我是一级菜单</li>
<li>我是一级菜单</li>
</ul>
</div>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
margin:8px;
}
li{
list-style: none;
cursor: pointer;
}
.first{
position: relative;
}
.first>li{
float: left;
display: block;
background-color: skyblue;
margin-right: 8px;
padding: 8px;
}
.first>li:hover{
background-color: cyan;
}
.second{
position: absolute;
left: 0px;
margin-top: 8px;
display: none;
}
.second>li{
display: block;
background-color: skyblue;
padding: 8px;
}
.menu:hover .second{
display: block;
background-color: cyan;
}
.second>li:hover{
background-color: cyan;
}
</style>
用css用hover实现点击一级出现二级菜单
最新推荐文章于 2023-09-24 01:51:21 发布