鼠标触控下拉菜单怎么继承

鼠标触控下拉菜单如何继承
这是当鼠标移动到一级分类时会触动显示一个背景白色的图片

鼠标触控下拉菜单怎么继承

当鼠标移动到下拉菜单，一级分类的触控会不见，如下图

鼠标触控下拉菜单怎么继承

请问要如何修改CSS才能让当鼠标移动到下拉菜单时，一级分类的触控显示白色背景图片还能保持在线？

下面是CSS代码，恳请高手帮忙解决下，谢谢！！

#menmu_a{position:relative; z-index:9;}

#menmu_a ul li{float:left; position:relative;}

#menmu_a ul li a{color:#fff; padding:12px 10px;}

#menmu_a ul li a:hover{background:url("../images/Header_Menu.jpg") no-repeat center; width:80px; height:28px; color:#b00000;}

#menmu_a ul li span{float:left; padding-right:5px;}


#menmu_a ul li ul{display:none; margin:0;padding:0; position:absolute; left:-1px; top:38px; border:1px solid #cccccc; border-top:0px; width:300px; background:#fff;}

------解决方案--------------------
核心代码是块：



.main_nav ul li.on a.link{background:#555;color:#fff;}

/* 这块就是鼠标放上去之后标题栏的背景色 */



$(this).addClass('on').children('dl').slideDown().end();

$(this).addClass('on') // 这块是动态添加与修改css的地方

完整的代码：



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>test</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#333;}

        table{border-collapse:collapse;border-spacing:0;}

        li{list-style:none;}

        a:focus,input,textarea{outline-style:none;}

        input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}

        a{color:#0a8cd2;text-decoration:none;}

        a:hover{text-decoration:underline;}

        .none{display:none}

        .demo{width:600px;height:500px;margin:30px auto;padding:30px;border:5px solid #ccc;background:#fff;}

        .main_nav{width:404px;height:30px;margin:0 auto;}

        .main_nav ul li{float:left;width:100px;height:30px;border-right:1px solid #666;position:relative;}

        .main_nav ul li a{display:block;height:30px;line-height:30px;text-align:center;background:#333;color:#ccc;text-decoration:none;}

        .main_nav ul li.on a.link{background:#555;color:#fff;}

        .submenu{position:absolute;left:0;top:30px;width:100px;display:none;}

        .submenu dd{height:31px;}

        .main_nav ul li dd a{display:block;height:30px;line-height:30px;text-align:center;color:#ccc;background:#555;border-bottom:1px solid #666;}

        .main_nav ul li dd a:hover{background:#777;color:#fff;}

    </style>

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

</head>

<body>

<div id="content" class="demo">

    <div class="main_nav hover">

        <ul>

            <li><a class="link" href="javascript:" title="">关于我们</a>

                <dl class="submenu">

                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>

                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>

                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>

                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>

                    <dd><a href="javascript:" title="">栏目子导航1</a></dd>

                </dl>

            </li>

            <li><a class="link" href="javascript:" title="">新闻中心</a>

                <dl class="submenu">

鼠标触控 下拉菜单怎么继承

相关推荐

鼠标触控下拉菜单怎么继承