HTML+CSS完成简易往下拉菜单实际效果

日期:2021-03-02 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

应用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⑻" />    
<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>    
<div 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>    
</div>    
<body>    
</body>    
</html>    

实际效果图:
 


 

以上所述是网编给大伙儿详细介绍的HTML+CSS完成简易往下拉菜单实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:CSS了解块级文件格式左右文(BFC) 返回下一篇:没有了