zoukankan      html  css  js  c++  java
  • 二级菜单

    <!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">
        /*基本设置*/
        a{
            text-decoration:none;
            font-size:36px;
            display:block;
            color:#000;}
        a:link{
            color:#000;}
        a:visited{
            color:#000;}
        a:hover{
            color:#C00;}
        a:active{
            color:#000;}
        li{
            list-style:none;}
        /*一级菜单设置*/
        #demo li{
            float:left;
            margin-right:50px;}
        /*二级菜单设置*/
        #demo li ul{
            display:none;/*初始状态:不可见*/
            position:absolute;
            padding:0;}
        #demo li ul li{
            float:none;}
        /*鼠标滑过一级菜单,显示对应的二级菜单*/
        #demo li:hover ul{
            display:block;}
    </style>
    </head>
    
    <body>
    
    <ul id="demo">
        <li>
            <a href="#" class="one">网络1603</a>
            <ul>
                <li><a href="#" class="two">第四组</a></li>
                <li><a href="#" class="two">第五组</a></li>
                <li><a href="#" class="two">第六组</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="one">网络1604</a>
            <ul>
                <li><a href="#" class="two">第一组</a></li>
                <li><a href="#" class="two">第二组</a></li>
                <li><a href="#" class="two">第三组</a></li>
            </ul>
        </li>
    </ul>
    
    </body>
    </html>
  • 相关阅读:
    基本STRUTS标签-学习笔记-Logic标签
    Static的使用
    模板template
    iostream与iostream.h的区别
    数据库连接池
    canvas基础
    javascript面试题集
    ES6新特性学习
    原型和原型链
    css为tbody或者li奇数偶数行样式
  • 原文地址:https://www.cnblogs.com/jinyufanfan/p/6283504.html
Copyright © 2011-2022 走看看