首页 > web前端 > css教程 > 正文

用HTML+CSS实现下拉菜单

php中世界最好的语言
发布: 2018-03-21 17:19:43
原创
2512 人浏览过

这次给大家带来用HTML+CSS实现下拉菜单,用HTML+CSS实现下拉菜单的注意事项有哪些,下面就是实战案例,一起来看一下。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>下拉框</title>    
<style type="text/css">    
*{ margin:0px; padding:0px;}    
#nav{ width:600px; height:40px; margin:0 auto;}    
#nav ul{ list-style:none;}    
#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}    
#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}    
#nav ul li a:hover{ color:#FFF; background:#333}    
#nav ul li ul{ position:absolute; display:none;}    
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}    
#nav ul li ul li a{ width:100%;}    
#nav ul li ul li a:hover{ background-color:#06f;}    
#nav ul li:hover ul{ display:block}    
</style>    
</head>    
<p id="nav">    
    <ul>    
        <li><a href="#">首页</a></li>    
        <li><a href="#">学习中心</a>    
            <ul>    
                <li><a href="#">java</a></li>    
                <li><a href="#">jQuery</a></li>    
                <li><a href="#">C++</a></li>    
                <li><a href="#">C语言</a></li>    
            </ul>            
        </li>    
        <li><a href="#">个人中心</a></li>    
        <li><a href="#">关于我们</a></li>    
    </ul>    
</p>    
<body>    
</body>    
</html>
登录后复制

效果图:
 

图1
 

图2

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS的Selector使用详解

CSS3的filter(滤镜)属性详解

详解CSS之margin的特殊使用技巧

以上是用HTML+CSS实现下拉菜单的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板