zoukankan      html  css  js  c++  java
  • 下拉导航菜单

    下拉导航菜单有一个固定的格式:

    <ul>
    <li><a href="">首页</a></li>
    <ul>

    <ul>
    <li><a href="">图片特效</a>
    <li><a href="">音乐特效</a>
    <li><a href="">视频特效</a>
    <li><a href="">文字特效</a>
    </ul>

    </ul>

    这里我只添加了一个背景的css文件,至于下拉导航菜单的样式是可以根据自己的喜好设置。

    下面是添加css优化后:

    @charset "UTF-8";
    #body{
    background:#F0FFF0;/*这是设置背景颜色*/
    }
    ul{/*这是设置ul标签的样式*/
    margin:0px;
    padding:0px;
    }
    ul li{/*定义列表样式,由垂直排列改成为水平排列。*/
    height:30px;
    115px;
    list-style:none;
    float:left;
    diaplay:inline;
    font:09em;

    }
    ul li a{/*定义超链接样式,也可以认为超链接被ul li a以此包括的*/
    color:#00FFFF;
    113px;
    margin:0px;
    padding:0px 0px 0px 8px;
    text-decoration:none;
    display:block;
    background:#DC143C;
    }
    ul li ul {/*定义鼠标滑过某个菜单项时的样式*/
    visibility:hidden;
    }
    ul li:hover ul{
    visibility:visible;/*设置display:block*/
    }
    ul li a:hover{
    background: #DC143C;
    border-bootom:1px dashed #FF0000;
    }

    效果如下:

  • 相关阅读:
    Easyui 表格底部加合计
    jQuery设置checkbox 为选中状态
    HTML 列表中的dl,dt,dd,ul,li,ol区别
    jQuery的toggle事件
    EasyUI 的日期控件单击文本框显示日历
    HTML设置span宽度
    JQuery获取与设置select
    生命周期
    钩子函数
    组件
  • 原文地址:https://www.cnblogs.com/lianggegege123/p/12192852.html
Copyright © 2011-2022 走看看