用HTML+CSS实现下拉菜单-css教程-PHP中文网

用HTML+CSS实现下拉菜单

php中世界最好的语言

发布： 2018-03-21 17:19:43

原创

2489 人浏览过

这次给大家带来用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>

登录后复制

效果图：