Css实现一个菜单导航

提要:使用大div定位设置为relative,子div设置为absolute实现菜单下拉
实现代码：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Nav</title>

     <style type="text/css">

         /*给导航设置一个背景#333*/

         .nav{

             background-color: #333;

         }

         /*给导航里的a标签设置样式*/

         .nav a{

             /*设置大小*/

             padding:16px 20px;

             /*去掉下划线*/

             text-decoration: none;

             /*字体颜色*/

             color: white;

             /*设置内联块级元素*/

             display: inline-block;

         }

         /*设置鼠标划过的背景色*/

         .nav a:hover{

             background: #111;

         }

         /*给下拉框设置定位*/

         .dropdown{

             position: relative;

             display: inline-block;

         }

         /*下拉内容设置定位*/

         .dropdown-content{

             display: none;

             position: absolute;

             /*设置一个似倒影的卡片样式*/

             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);

         }

         /*将下拉内容框里的a标签设置块级元素和字体颜色*/

         .dropdown-content a{

             display: block;

             min-width:110px;

             color:#000;

             padding: 10px 0;

             text-align: center;

         }

         /*设置下拉内容框里的a标签背景*/

         .dropdown-content a:hover{

             background: #f1f1f1;

             border:none;

         }

         /*当下拉按扭划过时，则下拉内容显示*/

         .dropdown:hover .dropdown-content{

             display: block;

         }

     </style>

 </head>

 <body>

 <!--先设置一个大的div-->

 <div class="nav">

     <!--设置元素，用标签-->

     <a href="#">主页</a>

     <a href="#">新闻</a>

     <!--设置下拉框的div-->

     <div class="dropdown">

         <!--设置下拉框的按扭名称-->

         <a href="#">国家列表</a>

         <!--设置下拉框的内容-->

         <div class="dropdown-content">

             <a href="#">中国</a>

             <a href="#">美国</a>

             <a href="#">日本</a>

         </div>

     </div>

     <div class="dropdown">

         <!--设置下拉框的按扭名称-->

         <a href="#">武器列表</a>

         <!--设置下拉框的内容-->

         <div class="dropdown-content">

             <a href="#">核弹</a>

             <a href="#">飞机</a>

             <a href="#">大炮</a>

         </div>

     </div>

 </div>

 </body>

 </html>
巴特西

Css实现一个菜单导航

最新文章

热门文章
