纯css实现横向下拉菜单
自己最近在捣腾css代码，不光是js能做很多有趣的东西，这货也可以做很多东西，现在把自己的一些作品分享给大家。
做得有点粗糙，大家根据这个思路来，可以自己修改修改。
关于demo：这是一个横向下拉的菜单，请看图：
下拉菜单部分：
具体代码部分：如下👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="landsca.css">
<link rel="stylesheet" type="text/css" href="style/reset.css">
</head>
<body>
<div class="container">
<ul class="main">
<a href="#" class="main1">hello</a>
<ul class="content">
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
</ul>
</ul>
<ul class="main">
<a href="#" class="main1">hello</a>
<ul class="content">
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
</ul>
</ul>
<ul class="main">
<a href="#" class="main1">hello</a>
<ul class="content">
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
</ul>
</ul>
<ul class="main">
<a href="#" class="main1">hello</a>
<ul class="content">
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
<li><a class="inner" href="#">world</a></li>
</ul>
</ul>
</div>
</body>
</html>
css部分：
.container{
display: flex;
}
ul,ul a,li,li a{
text-decoration: none;
list-style: none;
color: #000;
font-size: 12px;
}
.main1{
display: block;
border:1px solid #ddd;
width: 50px;//各位可以根据需要修改宽度
height: 28px;
text-align: center;
line-height: 28px;
}
.content{
margin-top: 1px;
position: absolute;/*设置绝对定位，宽度为内容宽带*/
left: -999px;/*隐藏掉菜单内容*/
padding: 0;
}
.main:hover ul{
left: auto;/*设置位于上级标签的正下方*/
}
.inner{
display: inline-block;
border: 1px solid #ddd;/*border-bottom会叠加*/
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.inner:hover{
background-color: #ddd;
}
.main{
display: inline-block;/*设置上级标签为inline-block，默认宽度=内容宽度，鼠标hover才会展开菜单*/
}
整个代码在：
https://github.com/narrow-gate/-css-
具体的可以直接下载，希望各位菊苣指教指教 。多谢各位
