用CSS实现水平方向菜单&竖直方向菜单&下拉菜单

来源：互联网发布：第三方辅助软件编辑：程序博客网时间：2024/05/18 07:39
最近在复习CSS,用CSS做的菜单显示，后面再详解。
<!DOCTYPE html /><html><head>    <title>纵向菜单</title>    <style type="text/css">        *{margin:0;padding:0;}        /*制作横向排列的菜单*/        #listmenu{width:100%;height:200px;background:#cc99ff;}        #listmenu nav{width:150px;margin-top:20px;background:#ffcccc;}        #nav_left ul{list-style-type:none;border:1px solid #cc00ff;border-radius:3px;padding:5px 10px 3px;}        #nav_left li{font-family:楷体;font-size:20px;padding:3px 5px;}        #nav_left li+li{border-top:1px solid #9900ff;}        #nav_left a{color:#660099;display:block;text-align:center;text-decoration:none;}        #nav_left a:hover{color:#006600;}        #nav_left a:active{color:#ff0000;background-color:#99ff66;}        #nav_left a:visited{color:#ffff33;}        /*制作横向排列的菜单*/        #sidewards{margin-top:10px;background:#ff99ff;height:80px;}        #sidewards nav{margin-top:20px;}        #nav_top ul{overflow:hidden;}        #nav_top li{list-style-type:none;float:left;}        #nav_top li+li a{border-left:2px solid #ccff00;}        #nav_top a{font-family:楷体;font-size:20px;padding:0 15px;color:#000000;display:block;text-align:center;text-decoration:none;}        #nav_top a:hover{color:#006600;}        #nav_top a:active{color:#ff0000;background-color:#99ff66;}        #nav_top a:visited{color:#ffff33;}        /*制作下拉菜单*/        #pulldown{margin-top:10px;background:#ff99ff;height:300px;}        #pulldown nav{margin:20px;}        .nav_pull{height:200px;}        .nav_pull ul{list-style-type:none;float:left;}        .nav_pull ul li{float:left;position:relative;}        .nav_pull a{display:block;color:#555;background-color:#eee;padding:.2em 1em;border-width:3px;border-color:#ffccff;background-clip:padding-box;text-decoration:none;border-right-style:solid;}        .nav_pull ul li ul li{float:none;}              .nav_pull ul li ul{width:9em;left:0;top:100%;position:absolute;display:none;}        .nav_pull ul li ul li a{border-right-style:none;border-top-style:solid;}        .nav_pull ul li:hover ul{display:block;}    </style>    </style></head><body>    <div id="listmenu">&我是垂直菜单哦^_^        <nav id="nav_left">            <ul>                <li><a href="#">个人信息</a></li>                <li><a href="#">教育经历</a></li>                <li><a href="#">家庭成员</a></li>            </ul>        </nav>    </div>    <div id="sidewards">&我是水平菜单哦^_^        <nav id="nav_top">            <ul>                <li><a href="#">个人信息</a></li>                <li><a href="#">教育经历</a></li>                <li><a href="#">家庭成员</a></li>            </ul>        </nav>    </div>    <div id="pulldown">我是下拉菜单哦^_^        <nav class="nav_pull vertical">            <ul>                <li><a href="#">个人信息</a>                    <ul id="two">                        <li><a href="#">梁幸芝</a></li>                        <li><a href="#">西安邮电大学</a>                        </li>                        <li><a href="#">计算机学院</a></li>                        <li><a href="#">软件1204</a></li>                    </ul>                </li>                <li><a href="#">教育经历</a>                    <ul id="two">                        <li><a href="#">北张小学</a></li>                        <li><a href="http://xpfyyz.30edu.com/">丰仪一中</a></li>                        <li><a href="http://baike.baidu.com/view/3990931.htm">南郊中学</a></li>                        <li><a href="http://www.xiyou.edu.cn/">西安邮电大学</a></li>                    </ul>                </li>                <li><a href="#">家庭成员</a>                    <ul id="two">                        <li><a href="#">梁爸爸</a></li>                        <li><a href="#">梁妈妈</a></li>                        <li><a href="#">我</a></li>                    </ul>                </li>            </ul>        </nav>    </div></body></html>
0 0