以下是一个简单实例，可以通过学习了解响应工菜单的制作。

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;
                }
        }

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS3怎样做凹凸和火焰的文字效果？

  用CSS3能够实现很多有趣的文字效果，这篇文章给大家分享的是用CSS3怎样做凹凸和火焰的文字效果的内容。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

• css3莲花盛开的动画效果是怎样做的？

  今天给大家分享一个用css3实现的莲花盛开的动画效果，小编觉得比较有意思，因此分享给大家做个参考，对新手学习CSS3的使用也有一定的帮助，感兴趣的朋友接下来跟随小编一起看看吧。

• CSS3怎样实现视频截图效果，方法是什么

  小编今天来给大家说说看css3截图的实现代码内容，一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。有需要的朋友可以参考。

• CSS中实现清除边距的代码是什么

  建议给html页面创建样式时，首先添加如下CSS样式，将所有的元素内外间距都设为0：{margin:0px;padding:0px;}因为如果我们不明确定义，由于不同浏览器处理策略不同，有的默认间距就设为0，而有的却有默认值。这样就会造成不同浏览器下显示的差异。例子去除html标签默认的外边距margin和内边距paddingbody,div,dl,dt,dd,ul,ol ...

• CSS盒子模型属性有哪些，用法是怎样

  本篇文章给大家带来了css中关于盒子模型的诸多属性详细解析，其中包括边框、边距、圆角等等，希望对大家有帮助。