纯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-

具体的可以直接下载，希望各位菊苣指教指教 。多谢各位

 

posted on 2017-06-11 23:54  袁233  阅读(874)  评论(2)    收藏  举报

导航