CSS中如何实现自适应导航菜单

小编给大家分享一下CSS中如何实现自适应导航菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

html

 <nav class="nav">         <ul>             <li class="current"><a href="#">Portfolio</a></li>             <li><a href="#">Illustration</a></li>             <li><a href="#">Web Design</a></li>             <li><a href="#">Print Media</a></li>             <li><a href="#">Graphic Design</a></li>         </ul>     </nav>

css

 .nav {             position: relative;             margin: 20px 0;         }             .nav ul {                 margin: 0;                 padding: 0;             }                 .nav ul li {                     margin: 0 5px 10px 0;                     padding: 0;                     list-style: none;                     float: left;                 }             .nav a {                 padding: 3px 12px;                 text-decoration: none;                 color: #999;                 line-height: 100%;             }                 .nav a:hover {                     color: #000;                 }             .nav .current a {                 background: #999;                 color: #fff;                 border-radius: 5px;             }             /* right nav */             .nav.right ul {                 text-align: right;             }             /* center nav */             .nav.center ul {                 text-align: center;             }

页面小于600显示成一列

@media (max-width: 600px) {             .nav {                 position: relative;                 min-height: 30px;             }                 .nav ul {                     width: 180px;                     padding: 5px 0;                     position: absolute;                     top: 0;                     left: 0;                     border: solid 1px #aaa;                     background: #fff url(images/icon-menu.png) no-repeat 10px 11px;                     border-radius: 5px;                     box-shadow: 0 1px 2px rgba(0,0,0,.3);                 }                 .nav li {                     display: none; /* hide all <li> items */                     margin: 0;                 }                 .nav .current {                     display: block; /* show only current <li> item */                 }                 .nav a {                     display: block;                     padding: 5px 5px 5px 32px;                     text-align: left;                 }                 .nav .current a {                     background: none;                     color: #666;                 }                 /* on nav hover */                 .nav ul:hover {                     background-image: none;                 }                     .nav ul:hover li {                         display: block;                         margin: 0 0 5px;                     }                     .nav ul:hover .current {                         background: url(images/icon-check.png) no-repeat 10px 7px;                     }                 /* right nav */                 .nav.right ul {                     left: auto;                     right: 0;                 }                 /* center nav */                 .nav.center ul {                     left: 50%;                     margin-left: -90px;                 }         }

看完了这篇文章，相信你对“CSS中如何实现自适应导航菜单”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！