zoukankan      html  css  js  c++  java
  • 一个非常简单易用而且兼容非常好的下拉菜单

    View Code
    #main_daohang_left li{width:60px; <!--定义li的长度为60个像素,背景为red -->
    background-Color
    :red;} 
    #main_daohang_left li a,#main_daohang_left li ul li a
    { <!--设置a的link样式 -->
    text-decoration
    :none;} 
    #main_daohang_left li ul
    {   <!--定位在左边,主要是为了好看-->
    padding-left
    :0px; } 
    #main_daohang_left li ul li
    {   <!--下拉菜单的文字排版问题-->
    padding-bottom
    :5px; padding-top:5px; vertical-align:middle;
    } 
    #main_daohang_left li,#main_daohang_left li ul li
    { list-style:none;}
    #main_daohang_left li ul
    { position:absolute;   <!-- 注意:主要是为了定位,使得下拉菜单放置网页的任何位置上-->
     display
    :none;} 
    #main_daohang_left li#menu:hover ul
    {   <!--a上鼠标到达时运行的样式 -->
    display
    :block; }
    #main_daohang_left li ul li:hover
    {   <!--a上鼠标到达时运行的样式 -->
    background-color
    :#DA937D;}
    #main_daohang_left li ul,#main_daohang_left li ul li
    {   <!--下拉菜单的样式-->
    width
    :200px; background-color:#487EB5;} 
    以上是css代码 下面是例子:(由于时间关系,我就没有详细说明整个的代码含义了,相信大家都可以看懂的吧)
    View Code
    <ul id="main_daohang_left">


                   <li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项

    </span></a>
                      
                       <!--此处为菜单项-->
                                    <ul>
                                          <li><a href="#">第1行</a></li>
                                          <li><a href="#">第2行</a></li>
                                          <li><a href="#">第3行</a></li>
                                          <li><a href="#">第4行</a></li>
                                    </ul>
                               
                        
                      
                   </li>
    </ul>
    <ul id="main_daohang_left">


                   <li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项

    </span></a>
                      
                       <!--此处为菜单项-->
                                    <ul>
                                          <li><a href="#">第1行</a></li>
                                          <li><a href="#">第2行</a></li>
                                          <li><a href="#">第3行</a></li>
                                          <li><a href="#">第4行</a></li>
                                    </ul>
                               
                        
                      
                   </li>
  • 相关阅读:
    重新理解js的执行环境和闭包
    给开发插上想象力的翅膀
    Vue源码的初始化以及数据驱动逻辑
    解析Vue源码之前
    前端模块化发展介绍和未来展望
    现代前端框架具备的特征分析及Vue、React对比
    始于Flux的单项数据流发展简单介绍
    用面向对象编程解决常见需求场景
    【Docker】之重启容器相关命令
    【Java】之获取CSV文件数据以及获取Excel文件数据
  • 原文地址:https://www.cnblogs.com/wanlxz/p/2468866.html
Copyright © 2011-2022 走看看