想来这个功能刚学的时候也是懵懵懂懂、糊里糊涂的,当时在网上也是没怎么找到有用的资料,知道被问题困住的痛苦,一晃半年就过去了,现在我就作为过来人给大家讲讲:

基本代码如下:

    <div id="nav">
    <nav class="container">
    <ul>
    <li><a href="ddstore.php">首页</a></li><li>
        <a>书籍分类</a>
            <ul>
                <li>程序设计</li>
                <li>数据库</li>
            </ul>
    </li><li>
    <a href="specials.php">特刊降价</a></li><li>
    <a href="contact_form.php">联系我们</a></li><li>
    <a href="about.php">关于我们</a></li><li id="menu-logo">
    <a href="my_cart.php">购物车</a></li>
    </ul>
    </nav>
    </div>

简单来说就是列表的互相嵌套,表中有表。(这里得用无序列表!)
CSS3的代码示例如下:

    .container{width:1000px;margin:0 auto;}
    #nav nav ul li{position:relative;}
    #nav nav ul ul li{background-color:#cc6600;}
    #nav nav ul ul li a{border-left:1px solid black;border-right:1px solid black;border-bottom:1px solid black;}
    #nav nav ul ul{visibility:hidden;position:absolute;left:-40.5px;}
    #nav nav ul li:hover ul{visibility:visible;z-index:100;}
    #nav nav{background-color:#cc6600;}
    nav ul li{display:inline-block;}
    nav ul a{display:inline-block;line-height:50px;width:90px;text-align:center;border-right:1px solid #834524;color:#ffffff;
    text-decoration:none;font-size:1.6em;transition:background 0.5s linear;}
    nav ul a:hover{background-color:#834524;}

实现鼠标悬停下拉列表,CSS3的书写就有点麻烦了,也是最关键的实现步骤;
首先对外层列表中的每一列设置为相对定位,即相对于其正常位置进行定位;在这里其它的都是修饰性的,像悬停背景缓慢变化、设置超链接左边界、各元素成块状分布等。
我主要想说的是对表中表的一些必要修饰,其在正常状态下hidden,在鼠标悬停下visible,并将层级设置成100(比其它大就可以了),在绝对位置下可以移动到其父元素的正下方比较好看。

效果示例如下:
list_table.png


the end

留言评论
推荐阅读
  • HTML5中在title标题标签里设置小图标

    一张网页,如果标题只有文字,那会显得特别单调;那么如何加入一个小图标呢,废话不说,代码展示。在html中的标签里: <hea...

    HTML5中在title标题标签里设置小图标
  • 用HTML5和CSS3实现站内搜索栏

    此搜索栏采用的是表单的一些标签,基本的代码如下: <div id="search"> <form acti...

    用HTML5和CSS3实现站内搜索栏
  • MySQL拒绝连接问题

    情况 用户名和密码确定正确 普通用户也已经授权并刷新了权限 服务器也重启过 端口也没被占用 这样一来,肯定是因为限制了访问...

    MySQL拒绝连接问题