课程

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

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

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

莫892897612

2018-10-08 11:00

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

*{margin: 0;

padding: 0}


.top{height: 40px;

line-height: 40px;

font-size: 11pt;

color:white;

padding-left: 20px;

text-align: left;

font-weight: bold;

background: #e4393c;}


.iul{border: 2px solid #e4393c;

width: 220px;

margin-left:30px;

margin-top: 20px }

.iul li{list-style-type: none;

padding-left:8px;

height: 30px;

line-height: 30px;

text-align: left;

z-index: 3;

/* background-image:url(1.png); */

background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);

background-repeat: no-repeat;

background-position:right; }


.iul li a{text-decoration: none;

font-size: 11pt;

color:gray;}


.iul li a:hover{color:#e4393c;

text-decoration:underline;

font-weight:bold;}

.iul li:hover{background-image: none;

border: 1px solid #DDD;

border-right: 0;

box-shadow: 0 0 8px #DDD;

-moz-box-shadow:0 0 8px #DDD;

-webkit-box-shadow:0 0 8px #DDD;}


.okc{display:none;

z-index: 4;

width: 715px;

left: 240px;

position:absolute;

top:60px;

border:1px solid #DDD;

background: white;

box-shadow: 0 0 8px #DDD;

-moz-box-shadow:0 0 8px #DDD;

-webkit-box-shadow:0 0 8px #DDD;}


.leftdiv{background: gray;

width: 490px;

float: left;

margin: 5px;}


.rightdiv{background: blue;

width: 200px;

float: left;

margin: 5px;}


.iul li:hover .okc{display:block;}



</style>


<body>

<ul class='iul'>

<div class='top'>全部商品分类</div>

<li><a href='#'>图书、音像、数字产品</a></li>

<div class='okc'>

<div class='leftdiv'>手机<br>电脑<br>通讯<br>笔记本</div>

<div class='rightdiv'>右侧推荐品牌<br>右侧推荐品牌<br>右侧推荐品牌</div>

</div>

<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>


写回答 关注

1回答

  • 计院小浩
    2018-10-11 18:33:01
    已采纳

    <div class='okc'>

    <div class='leftdiv'>手机<br>电脑<br>通讯<br>笔记本</div>

    <div class='rightdiv'>右侧推荐品牌<br>右侧推荐品牌<br>右侧推荐品牌</div>

    </div>

    这段代码要放到li标签里面，你放在外面了

    1 0

    莫89289...

    谢谢大哥

    2018-10-12 09:42:07

    共 1 条回复 >

商城分类导航效果

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

63734 学习 · 281 问题

查看课程

相似问题

为什么鼠标移到了LI上那个悬浮层没显示出来呢？

回答 1

为什么鼠标只有移到第一个li里面div才会显示出来

回答 2

悬浮怎么出来的！

回答 3

为什么我的鼠标离开li标签了，移动在submenu菜单中他依旧还在显示？

回答 2

求大神帮忙看下代码？实现不出来二级菜单移出

回答 2

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