css+JQuery来实现简单的二级下拉菜单

最新推荐文章于 2024-10-02 13:25:04 发布

Learner

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量347

点赞数

分类专栏： css学习文章标签： jquery css class function float xhtml

本文链接：https://blog.csdn.net/unddone8373229/article/details/7390981

版权

css学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dmeo03.aspx.cs" Inherits="Dmeo03" %>

<!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 runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        ul,li
        {
            margin:0; padding:0;
            list-style:none;
        }
        li.inner
        {
            float:left;         /*将多个导航菜单设置成一行*/
            display:inline;
        }
        li.inner a
        {
            display:block;
            text-decoration:none; 
            text-align:center;
            padding:10px;
            width:150px;
            background-color:Black; 
            color:White; 
            font-size:14px;
            border-right:1px solid white;
        }
        li.inner a:hover
        {
            background-color:Blue;
        }
        li.inner ul
        {
            display:none;
        }
        li.inner ul li a
        {   
            width:150px;
            display:block;
            border-top:1px solid white;
        }
        li.inner ul li a:hover
        {
            background-color:Red;
        }
    </style>
    
</head>
<body>
    <ul class="outer">
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("li.inner").hover(
            function () {
                $("ul", this).css("display", "block");
            },
            function () {
                $("ul", this).css("display", "none");
            }
        )
    })
</script>

第一步：将一级菜单和二级菜单放在纵轴一条线上

    <ul class="outer">
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
        <li class="inner">
            <a href="#">网站首页</a>
            <ul>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
                <li><a href="#">网站首页子链接</a></li>
            </ul>
        </li>
    </ul>

第二步：

黏贴了以上代码，你会发觉画面很糟糕，乱七八糟得，这个时候就需要css样式来进行调整了。主要要调整的几个位置，class为inner的外层的li设置float：left，这是为了让素有的外层li排成一排。

为外层包裹的a标签添加样式，块状，背景色，字体等一系列设置

为内层li抱过的ul添加样式，并且设置ul在页面加载的时候隐藏display：none

<style type="text/css">
        ul,li
        {
            margin:0; padding:0;
            list-style:none;
        }
        li.inner
        {
            float:left;         /*将多个导航菜单设置成一行*/
            display:inline;
        }
        li.inner a
        {
            display:block;
            text-decoration:none; 
            text-align:center;
            padding:10px;
            width:150px;
            background-color:Black; 
            color:White; 
            font-size:14px;
            border-right:1px solid white;
        }
        li.inner a:hover
        {
            background-color:Blue;
        }
        li.inner ul
        {
            display:none;
        }
        li.inner ul li a
        {   
            width:150px;
            display:block;
            border-top:1px solid white;
        }
        li.inner ul li a:hover
        {
            background-color:Red;
        }
    </style>

第三步：用JQuery实现二级菜单的显示和隐藏

<script type="text/javascript">
    $(document).ready(function () {
        $("li.inner").hover(
            function () {
                $("ul", this).css("display", "block");
            },
            function () {
                $("ul", this).css("display", "none");
            }
        )
    })
</script>

第四步：OK，好了，来进行测试。具体的完整代码可以看最上面的那部分