顶部右侧，下拉菜单效果为什么无法实现？

来源：5-2 作业题

qq_鸭绿桥第一帅哥_0

2019-02-19 14:42:40

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>5-2</title>
    <link rel="stylesheet" type="text/css" href="css/5-2zuoye.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="js/5-2zuoye.js"></script>
</head>

<body>
    <!-- 大容器 -->
    <div class="wrap">
        <!-- 设置container是为了设置背景颜色 -->
        <div class="container">
            <!-- 顶部区 -->
            <div class="header">
                <ul class="headerleft">
                    <li class="dropdown-menu" id="one"><a href="#">亲，请登录</a></li>
                    <li class="dropdown-menu"><a href="#">免费注册</a></li>
                    <li class="dropdown-menu"><a href="#">手机逛慕淘</a></li>
                </ul>
                <ul class="headerright">
                    <li class="dropdown-menu1 menu1">
                        <a href="#">我的慕淘</a><img src="sucai/icon/21.png">
                        <ul class="dropdown-menu3">
                            <li>已买到的宝贝</li>
                            <li>我的慕淘</li>
                        </ul>
                    </li>
                    <li class="dropdown-menu1"><a href="#">收藏夹</a><img src="sucai/icon/21.png"></li>
                    <li class="dropdown-menu1"><a href="#">商品分类</a></li>
                    <li class="dropdown-menu1"><a href="#">卖家中心</a><img src="sucai/icon/21.png"></li>
                    <li class="dropdown-menu1"><a href="#">联系客服</a><img src="sucai/icon/21.png"></li>
                </ul>
            </div>
            <!-- logo区 -->
            <div class="logo"></div>
        </div>
        <!-- 导航 -->
        <div class="nav"></div>
        <!-- banner区 -->
        <div class="banner"></div>
        <!-- 右导航 -->
        <div class="rightsidebar"></div>
        <!-- 楼层区 -->
        <div class="louceng"></div>
        <!-- 友情链接 -->
        <div class="lianjie"></div>
        <!-- 页脚 -->
        <div class=footer""></div>
    </div>
</body>

</html>



*{
	margin: 0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
}
/* 大容器 */
.wrap{
	width: 100%;
}
/* container */
.container{
	width: 100%;
	background: #f3f5f7;
    overflow: hidden;
	zoom: 1;
}
/* header区 */
.header{
	width: 70%;
	margin: 0 auto;
	border-bottom: 1px solid #C0C0C0;
	height: 44px;
}
.headerleft,.headerright{
	overflow: hidden;
	zoom: 1;
	height: 44px;
	line-height: 44px;
}
.headerleft{
	float: left;
}
.headerright{
	float: right;
}
.dropdown-menu{
	float: left;
	font-size: 10px;
	padding-left: 15px;
}
.dropdown-menu a,.dropdown-menu1 a{
   color: gray;
}
#one a{
	color: red;
}
.dropdown-menu a:hover{
	color: red;
}
.dropdown-menu1{
	float: left;
	font-size: 10px;
	padding-left: 20px;
}
.menu1{
	position: relative;
	height: 44px;
}
.dropdown-menu3{
	position: absolute;
	top: 44px;
	display: none;
	z-index: 999;
}
.menu1 a:hover .dropdown-menu3{
	display: block;
}

写回答

2回答