• 一个非常简单易用而且兼容非常好的下拉菜单


    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>
  • 相关阅读:
    slice()、substring()、substr()的区别用法
    程序员如何快速上手一个自己不太熟悉的新项目?有什么技巧?
    计算重复字符串长度
    计算机视觉算法研发岗招聘要求
    C++进阶STL-2
    C++进阶STL-1
    拼硬币
    序列找数
    寻找合法字符串
    字符串是否由子串拼接
  • 原文地址:https://www.cnblogs.com/wanlxz/p/2468866.html
Copyright © 2020-2023  润新知