课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如图，找了半晌都找不到错误，求助

来源：2-3 鼠标浮动效果

白二的诗

2016-11-29 17:26

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title></title>
   <style type="text/css">
       body
{
           padding:0;
           font-size:10pt;
       }
       .topmenu{

           display:block;
           width:220px;
           border:2px solid #e4393c;
           margin:0;
           padding:0;
       }
       .toptitle{
           height:40px;
           line-height:40px;
           text-align:left;
           font-size:11pt;
           font-weight:bold;
           color:White;
           background:#e4393c;
           padding-left:20px;
       }
       .topmenu li{
           height:30px;
           line-height:30px;
           font-size:11pt;
           list-style-type:none;/*去掉list前面的 小圆点,其他的浏览器已经没有小圆点了，ie有*/
text-align:left;
           padding-left:8px;
           z-index:3;
           background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
           background-repeat:no-repeat;
           background-position:right;/*可简写为：background:url(http://img.mukewang.com/5411027300014f0200220030.jpg) no-repeat right;*/
}
       .topmenu li a{
           text-decoration:none;
           color:#313131;
       }
       .topmenu li a:hover{
           text-decoration:underline;
           font-weight:bold;
           color:#e4393c;
       }
       .topmenu li:hover{
           border:1px solid #DDD;
           border-right:0;
           box-shadow:0 0 8px #DDD;
           -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/
background-image:none;
       }
       .submenu{
           display:none;
           width:715px;
           left:220px;
           position:absolute;
           top:40px;
           border:1px solid #DDD;
           z-index:4;
           color:white;
           box-shadow:0 0 8px #DDD;
           -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/

}
       .leftdiv
{
           background:gray;
           float:left;
           width:490px;
           margin:5px;
       }
       .rightdiv{
           background:blue;
           float:left;
           width:200px;
           margin:5px;
       }
       .topmenu li:hover .submenu
{
           display: block;
       }
   </style>
</head>
<body>
<ul class="topmenu">
   <div class="toptitle">
       全部商品分类
   </div>
   <li><a href="#">图书、音像、数字商品</a>
  <div class=submenu">
       <div class="leftdiv">
           左侧二级分类<br />
           左侧二级分类<br />
           左侧二级分类<br />
           左侧二级分类<br />
           左侧二级分类<br />
       </div>
       <div class="rightdiv">右侧推荐品牌</div>
   </div></li>
   <li><a href="#">家用电器</a></li>
   <li><a href="#">手机、数码</a></li>
   <li><a href="#">电脑、办公</a></li>
   <li><a href="#">家居、家具、家装、厨具</a></li>
   <li><a href="#">服饰内衣、珠宝首饰</a></li>
   <li><a href="#">个护化妆</a></li>
   <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
   <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
   <li><a href="#">运动户外</a></li>
   <li><a href="#">汽车用品</a></li>
   <li><a href="#">母婴、玩具乐器</a></li>
   <li><a href="#">食品饮料、酒类、生鲜</a></li>
   <li><a href="#">营养保健</a></li>

</ul>
</body>
</html>http://img.mukewang.com/583d49a20001c16605930501.jpg

写回答 关注

2回答

  • 慕粉18221508921
    2016-11-29 20:21:43
    已采纳

    <div class="submenu">//忘了加引号

    放到sublime text 3 里，会有提示，直接就改出来了，对了，我是把html,css,js的hint都装了，所以找错比较容易


    4 0

    白二的诗 回复慕粉1822...

    帮忙看一下这个问题的下一个回答吧，给你的回复不能超过三百字，只能回复在回答里面了，嘿嘿

    2016-12-01 09:13:01

    共 4 条回复 >

  • 白二的诗
    2016-12-01 09:11:11

    回复 慕粉18221508921：这个要是也能检测出来真的服了（悬浮层上的字不知道为啥是透明的，应该是哪敲错了），像我这种经常犯错的小白就应该用一个纠错功能比较强大的工具。帮我看看吧，谢啦

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
            body
            {
                padding:0;
                font-size:10pt;
            }
            .topmenu{

                display:block;
                width:220px;
                border:2px solid #e4393c;
                margin:0;
                padding:0;
            }
            .toptitle{
                height:40px;
                line-height:40px;
                text-align:left;
                font-size:11pt;
                font-weight:bold;
                color:White;
                background:#e4393c;
                padding-left:20px;
            }
            .topmenu li{
                height:30px;
                line-height:30px;
                font-size:11pt;
                list-style-type:none;/*去掉list前面的 小圆点,其他的浏览器已经没有小圆点了，ie有*/
                text-align:left;
                padding-left:8px;
                z-index:3;
                background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
                background-repeat:no-repeat;
                background-position:right;/*可简写为：background:url(http://img.mukewang.com/5411027300014f0200220030.jpg) no-repeat right;*/
            }
            .topmenu li a{
                text-decoration:none;
                color:#313131;
            }
            .topmenu li a:hover{
                text-decoration:underline;
                font-weight:bold;
                color:#e4393c;
            }
            .topmenu li:hover{
                border:1px solid #DDD;
                border-right:0;
                box-shadow:0 0 8px #DDD;
                -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
                -webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/
                background-image:none;
            }
            .submenu{
                display:none;
                width:715px;
                left:220px;
                position:absolute;
                top:40px;
                border:1px solid #DDD;
                z-index:4;
                color:white;
                box-shadow:0 0 8px #DDD;
                -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
                -webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/

            }
            .leftdiv
            {
                float:left;
                width:490px;
                margin:5px;

            }
            .rightdiv{
                background:blue;
                float:left;
                width:200px;
                margin:5px;
            }
            .topmenu li:hover .submenu
            {
                display: block;
            }
            .topmenu li:hover span
            {
               background:white;
                display:inline-block;
                z-index:20;
                width:20px;
                height:30px;
                float:right;
                position:relative;
            }
        </style>
    </head>
    <body>
    <ul>
        <div>
            全部商品分类
        </div>
        <li><a href="#">图书、音像、数字商品</a><span></span>
       <div>
            <div>
                左侧二级分类<br />
                左侧二级分类<br />
                左侧二级分类<br />
                左侧二级分类<br />
                左侧二级分类<br />
            </div>
            <div>右侧推荐品牌</div>
        </div></li>
        <li><a href="#">家用电器</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑、办公</a></li>
        <li><a href="#">家居、家具、家装、厨具</a></li>
        <li><a href="#">服饰内衣、珠宝首饰</a></li>
        <li><a href="#">个护化妆</a></li>
        <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
        <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
        <li><a href="#">运动户外</a></li>

    http://img.mukewang.com/583f789a00012cb209650496.jpg

    2 0

    慕粉1822...

    我私信你了，能收到么？

    2016-12-01 20:36:02

    共 2 条回复 >

商城分类导航效果

两种方法实现分类导航，同时扩展讲解其它商城分类导航的制作方法

63734 学习 · 315 问题

查看课程

相似问题

背景图哪里找啊？？？？？

回答 3

求助大神们

回答 2

为什么我的for循环写到一半就卡住了？

回答 3

二级悬浮菜单不显示，截了代码图。求解啊。

回答 4

真的找不出原因了，大家帮帮忙。谢谢。为什么鼠标移到了LI上那个悬浮层没显示出来呢？

回答 1

打开慕课网App查看更多内容