猿问

为什么当鼠标移到悬浮层的时候,一级导航里的文字消失了?而且当设置.rightmenu li a中的width时,.leftmenu dl中的a标签的width也会受影响(.leftmenu被包含在.rightmenu li中)?

<style type="text/css">

body,ul

        {   margin:0;

            padding: 0;

            font-size: 10pt;

            behavior:url(css/csshover.htc);

        }

        .rightmenu

        {

            display: block;

            width: 200px;

            margin: 0;

            padding: 0;

        }

        .rightmenu .title

        {

            height: 40px;

            line-height: 40px;

            text-align: left;

            font-size: 15pt;

            font-weight: bold;

            color: White;

            background:#8D0E11;

            padding-left: 8px;

        }

        .rightmenu li

        {   

            height: 30px;

            line-height: 30px;

            font-size: 11pt;

            list-style-type: none;

            text-align: left;

            background:#E30627;

border:1px solid #E30627;

        }

        .rightmenu li a

        {

            text-decoration: none;

            color:#FFF;

display:block;

padding-left: 8px; 

        }

        .rightmenu li a:hover

        {

            text-decoration:none;

            color:#E30627;

        }

        .rightmenu li:hover

        {

            background:none;

border-right:none;

        }

        .leftmenu

        {

            display:none;

            width: 715px;

            left: 200px;

            position: absolute;

            top: 39px;

            border: 2px solid #E30627;

border-left:none;

            z-index: 4;

        }

        .left-div

        {

display:block;

            float: left;

            width: 490px;

            margin: 5px;

        }

        .left-div dl

        {

            display: block;

            overflow: hidden;

margin:6px 0;

        }

        .left-div dl dt

        {

            display: block;

            float: left;

            width: 50px;

            text-align: right;

            height: 22px;

            line-height: 22px;

            padding-right: 6px;

        }

        

        .left-div dl dt a

        {

            color:#8C8C8C;

            font-weight: bold;

            text-decoration:none;

            font-size: 10pt;

        }

        .left-div dl dd

        {

            display: block;

            overflow: hidden;

border-bottom: 1px solid #CCC;

padding-bottom: 6px;


        }

        .left-div dl dd a

        {

            display:block;

            float: left;

            border-left: 1px solid #CCC;

            color: #737373;

            font-size: 10pt;

            padding: 0 8px;

            height: 14px;

            line-height: 14px;

            margin: 3px 0;

        }

        

        .rightmenu li:hover .leftmenu{display:block;}

</style>

<body>

<div class="rightmenu"><!--一级导航-->

  <div class="title">全部商品分类</div>

  <ul>

    <li><a href="#">图书、影像、电子书</a><span></span>

       <div class="leftmenu"><!--悬浮层-->

          <div class="left-div">

            <dl>

              <dt><a href="#">音像</a></dt>

              <dd><a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> <a href="#">影视/动漫周边</a></dd>

            </dl>

          </div>

       </div>

    </li>

    <li><a href="#">家用电器</a><span></span></li>

    <li><a href="#">手机、数码、京东通信</a><span></span></li>

    <li><a href="#">电脑、办公</a><span></span></li>

    <li><a href="#">家具、家居、家装、厨具</a><span></span></li>

    <li><a href="#">个户化妆、清洁用品</a><span></span></li>

    <li><a href="#">汽车、汽车用品</a><span></span></li>

    <li><a href="#">母婴、玩具乐器</a><span></span></li>

    <li><a href="#">营养保健</a><span></span></li>

  </ul> 

</div>

</body>


大禹非也
浏览 1851回答 1
1回答

echo_kinchao

因为你覆盖了那一层 而且字体的颜色也改了
随时随地看视频慕课网APP
我要回答