码迷,mamicode.com
首页 > Web开发 > 详细

web前端入门到实战:html基础—下拉式菜单

时间:2019-11-17 12:29:22      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:div   部分   ul li   web前端入门   gem   了解   pad   时间   abs   

一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口。一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间。接下来我教大家写单击菜单栏中的菜单命令将会出现一个下拉菜单。

1.HTML页面

<div id="nav">
        <ul>
            <li><a href="">菜单一</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="">菜单二</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="">菜单三</a></li>
        </ul>
    </div>

2.css样式

/*清除原样式*/ * { margin: 0px; padding: 0px; border: 0px;
} ul { list-style: none;
} a { text-decoration: none;
}
/*一级菜单样式*/ #nav { width: 1000px; height: 40px; margin: 0px auto; background: #f00; font-size: 18px; font-family: 微软雅黑;
} #nav ul li { float: left;
        /*包含块*/ position:relative;
    } #nav ul li a { display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; color: #fff;
        } #nav ul li a:hover { color: #ffd800; background: #970606;
            }
/*二级菜单样式*/ #nav ul li ul { position:absolute; top:40px; left:0px; display:none;
        } #nav ul li ul li { float:none;
            } #nav ul li ul li a{ background:#f00; border-top:1px solid #ccc;
            }
            /*一级菜单悬停时二级菜单可见*/ #nav ul li:hover ul { display:block;
        }
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

效果如图:

技术图片

技术图片

web前端入门到实战:html基础—下拉式菜单

标签:div   部分   ul li   web前端入门   gem   了解   pad   时间   abs   

原文地址:https://blog.51cto.com/14592820/2450903

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!