麻烦老师看下，实在找不到出错的地方，不知道定位是不是有问题
来源：5-3 首页.UI组件-UiMenu
weixin_慕移动6442865
2019-10-12 15:36:22
麻烦老师看下，问题在哪里
<!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>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/ui.css">
<script src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id='box'>
<header id="header">
<div class='top'>
<p class="call">010-144/116114电话预约</p>
<p class="welcome">欢迎来到统一挂号平台 请
<a href="">登录</a>
<a href="">注册</a>
<a href="">帮助中心</a>
</p>
</div>
<div class='log'>
<div class='logo'></div>
<div class='log-input ui-search'>
<div class='ui-search-selected'>医院</div>
<div class='ui-search-selected-list' style="display: none;">
<ul>
<li><a href="#">科室</a></li>
<li><a href="#">疾病</a></li>
<li><a href="#">医院</a></li>
</ul>
</div>
<input type="text" name='search-content' class='ui-search-input' placeholder="请输入搜索内容">
<a href="#" class='ui-search-selected-search'></a>
</div>
</div>
</header>
<div id='bodyer'>
<nav class="nav">
<div class='all-menu'>
全部科室
<div class='all-menu-list ui-menu'>
<div class='ui-menu-item'>
<a href="#" class='ui-menu-item-department'>内科</a>
<a href="#" class='ui-menu-item-disease'>高血压</a>
<a href="#" class='ui-menu-item-disease'>冠心病</a>
<div class='ui-menu-item-detail'>
<div class='ui-menu-item-detail-group'>
<div class='ui-menu-item-detail-group-captionn'>
内科
</div>
<div class='ui-menu-item-detail-group-list'>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
</div>
<div class='ui-menu-item-detail-group-captionn ui-menu-item-detail-group-captionn2'>
内科常见疾病
</div>
<div class='ui-menu-item-detail-group-list'>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
</div>
</div>
</div>
</div>
<div class='ui-menu-item'>
<a href="#" class='ui-menu-item-department'>内科</a>
<a href="#" class='ui-menu-item-disease'>高血压</a>
<a href="#" class='ui-menu-item-disease'>冠心病</a>
<div class='ui-menu-item-detail'>
<div class='ui-menu-item-detail-group'>
<div class='ui-menu-item-detail-group-captionn'>
内科
</div>
<div class='ui-menu-item-detail-group-list'>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
</div>
<div class='ui-menu-item-detail-group-captionn ui-menu-item-detail-group-captionn2'>
内科常见疾病
</div>
<div class='ui-menu-item-detail-group-list'>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">心脑血管科</a>
<a href="#">神经内科</a>
<a href="#">内分泌科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
<a href="#">血液科</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="" class='link'>按医院挂号</a>
<a href="" class='link'>按科室挂号</a>
<a href="" class='link'>按疾病挂号</a>
<a href="" class='link'>最新公告</a>
<a href="" class='link right'>社会知名医院</a>
</nav>
<div class='banner'></div>
<div class='right-nav'>
<p class='quick-Reservation'>快速预约</p>
<div id='hospital-Information'>
<select name="" class="information">
<option value="" >医院地区</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="" class="information">
<option value="">医院等级</option>
</select>
<select name="" class="information">
<option value="">医院名称</option>
</select>
<select name="" class="information">
<option value="">医院科室</option>
</select>
</div>
<button class='information-btn'>快速查询</button>
</div>
<div class="right-help">
<p class='help-centre'>帮助中心</p>
<div class='account-issues'>
<a href="">账号指南</a>
<a href="">预约指南</a>
<a href="">账号找回</a>
<a href="">常见问题</a>
</div>
</div>
<div class='left-new'>
<nav class='leftnew-nav'>
<p class='block-host'>医院</p>
<p class='block-host'>科室</p>
</nav>
<div class='block-host-list'>
<div class='leftnew-area'>
<ul>
<li>全部</li>
<li>东城区</li>
<li>西城区</li>
<li>朝阳区</li>
<li>丰台区</li>
<li>石景山区</li>
<li>海淀区</li>
<li>门头沟区</li>
<li>房山区</li>
<li>其他</li>
</ul>
</div>
<div class='host-name'>
<dl>
<dt><img src="./img/hospital-1.jpg" alt=""></dt>
<dd class='title'>北京协和医院 <span>【三级甲等】</span> </dd>
<dd>电话:010-123456789</dd>
<dd>地址:北京市直门大街110号</dd>
</dl>
<dl>
<dt><img src="./img/hospital-2.jpg" alt=""></dt>
<dd class='title'>北京大学第一医院<span>【三级甲等】</span></dd>
<dd>电话:010-123456789</dd>
<dd>地址:北京市直门大街110号</dd>
</dl>
<dl>
<dt><img src="./img/hospital-3.jpg" alt=""></dt>
<dd class='title'>北京大学人民医院<span>【三级甲等】</span></dd>
<dd>电话:010-123456789</dd>
<dd>地址:北京市直门大街110号</dd>
</dl>
<dl>
<dt><img src="./img/hospital-4.jpg" alt=""></dt>
<dd class='title'>北京大学第三医院<span>【三级甲等】</span></dd>
<dd>电话:010-123456789</dd>
<dd>地址:北京市直门大街110号</dd>
</dl>
</div>
<div class='host-list'>
<ul>
<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>
<div class='more-host'><a href="#">更多医院</a></div>
</div>
<div class='block-host-list' style='display: none;'>
科室内容
</div>
</div>
<div class='right-new'>
<div class='new-notice'>
<span>最新公告 <a href="#">|更多</a></span>
</div>
<ul>
<li><a href=""><span>1、</span>信息公告第一条信息公告第一条信息公告第一条</a> </li>
<li><a href=""><span>2、</span>信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href=""><span>3、</span>信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">4、信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">5、信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">6、信息公告第一条信息公告第一条信息公告第一条</a></li>
</ul>
</div>
<div class="right-new2">
<div class='close-notice'>
<span>停诊公告 <a href="#">|更多</a></span>
</div>
<ul>
<li><a href=""><span>1、</span>信息公告第一条信息公告第一条信息公告第一条</a> </li>
<li><a href=""><span>2、</span>信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href=""><span>3、</span>信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">4、信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">5、信息公告第一条信息公告第一条信息公告第一条</a></li>
<li><a href="">6、信息公告第一条信息公告第一条信息公告第一条</a></li>
</ul>
</div>
</div>
<div id='footer'>
<span>Copyright©2017慕课网版权所有</span>
</div>
</div>
</body>
<script src="./js/ui.js"></script>
</html>
*{margin:0;padding:0;}
#box{
width: 100%;
background-color:#fff;
}
#header{
width: 1264px;
margin:0 auto;
}
#header .call{
display: inline-block;
width: 163px;
height: 30px;
line-height: 30px;
margin-left:132px;
padding-left: 20px;
font-size: 12px;
background: url(../img/icon-call.png) 0px 8px no-repeat;
}
#header .welcome{
width: 415px;
height: 30px;
margin-right:131px;
float: right;
font-size: 12px;
line-height: 30px;
}
#header .welcome a{
text-decoration: none;
color:#2da5e1;
}
#header .welcome a:nth-of-type(1){
margin-left:17px;
}
#header .welcome a:nth-of-type(2){
margin-left:14px;
}
#header .welcome a:nth-of-type(3){
margin-left:30px;
}
.top{
height: 30px;
background-color:#f5f5f5;
}
.log{
height: 100px;
background-color:#ffff;
}
.log>.logo{
width: 403px;
height: 100px;
display: inline-block;
background: url(../img/logo.png) 10px 10px no-repeat;
background-size: 100%;
}
/* .log>.log-input{
width: 329px;
height: 36px;
float:right;
color: #fff;
font-weight: bold;
margin-right:131px;
border:1px solid red;
margin-top:24px;
} */
#bodyer{
width: 1264px;
height: 958px;
margin:0px auto;
margin-bottom: 40px;
background-color: #fff;
}
.nav{
width: 1264px;
height: 36px;
line-height: 36px;
background-color:#60bff2;
}
#bodyer .nav>.all-menu{
display: inline-block;
width: 190px;
height: 36px;
background-color: #1fa4f0;
text-align: center;
color:#fff;
margin-left:132px;
float: left;
}
#bodyer .all-menu>.all-menu-list{
width: 190px;
height: 424px;
background-color: #1fa4f0;
}
#bodyer .nav>a{
text-decoration: none;
color:#fff;
width: 100px;
display: inline-block;
margin-left:25px;
}
#bodyer .nav>.right{
float: right;
margin-right:131px;
}
#bodyer .nav>a:hover{
color:#d7f3ff;
}
.banner{
width: 542px;
height: 414px;
float: left;
background-color: rgb(122, 215, 255);
margin-left:328px;
margin-top:10px;
}
.right-nav{
width: 250px;
height: 256px;
float: left;
margin-top:10px;
margin-left:10px;
background-color:#fafafa;
position: relative;
}
.right-nav>.quick-Reservation{
width: 92px;
height: 25px;
position: absolute;
top:19px;
left:75px;
color:#fec623;
font-weight: bold;
padding-left:25px;
background: url(../img/icon-help.png) 0px 2px no-repeat;
}
#hospital-Information{
width: 170px;
height: 133px;
position: absolute;
left:40px;
top:53px;
}
#hospital-Information>.information{
width: 170px;
height: 25px;
border-radius: 5px;
margin-top:12px;
border:1px solid #dcdddd;
}
.right-nav>.information-btn{
width: 110px;
height: 31px;
position: absolute;
top:210px;
left:70px;
border-radius: 5px;
background-color: #fecd09;
border:none;
color:#fff;
font-weight: bold;
}
.right-help{
width: 250px;
height: 148px;
float: left;
margin-left:10px;
margin-top:10px;
background-color:#fafafa;
position: relative;
}
.right-help>.help-centre{
width: 93px;
height: 22px;
position: absolute;
left:75px;
top:18px;
background: url(../img/icon-help.png) 0px -23px no-repeat;
padding-left:25px;
color:#4bb4ed;
}
.right-help>.account-issues{
width: 250px;
position: absolute;
top:64px;
left:0px;
}
.right-help .account-issues>a{
display: inline-block;
width: 100px;
height: 15px;
margin:10px 10px;
text-align: center;
text-decoration: none;
color:#4bb4ed;
}
.left-new{
width: 738px;
height: 494px;
float: left;
margin-top:10px;
margin-left:132px;
/* border:1px solid #f4f6fa; */
}
.left-new>.leftnew-nav{
height: 35px;
background-color:#f4f6fa;
}
.left-new .leftnew-nav>p{
width: 113px;
float: left;
line-height: 35px;
text-align: center;
color:#60bff2;
}
.left-new .leftnew-nav>p:hover{
background-color: #60bff2;
color:#fff;
}
.left-new>.leftnew-area{
height: 45px;
background-color: #fff;
border-bottom: 1px solid #f4f6fa;
}
.left-new .leftnew-area ul>li{
padding:5px 7px;
list-style: none;
float: left;
margin-left:10px;
line-height: 25px;
font-size: 13px;
margin-top:5px;
}
.left-new .leftnew-area ul>li:hover{
background-color: #60bff2;
color:#fff;
}
.left-new .host-name>dl{
/* border:1px solid #fff; */
width: 342px;
height: 98px;
float: left;
margin:16px 12px;
position: relative;
}
.left-new .host-name dl dt>img{
width: 110px;
height: 98px;
}
.left-new .host-name dl dt>img,dd{
float: left;
}
.left-new .host-name dl>.title{
font-size: 16px;
color:#60bff2;
}
.left-new .host-name dl .title>span{
font-size: 13px;
float: right;
color:#979797;
}
.left-new .host-name dl>dd{
width: 222px;
line-height: 30px;
margin-left:10px;
font-size: 10px;
}
.left-new .host-list ul>li{
list-style: none;
float: left;
width:344px;
height: 35px;
border-bottom: 1px dashed #767676;
margin-left:12px;
font-size:13px;
line-height:35px;
}
.left-new .host-list ul li>a{
color: #767676;
text-decoration: none;
}
.left-new .host-list ul li>span{
float:right;
}
.left-new .block-host-list>.more-host{
float: left;
text-align: center;
margin-top:18px;
width:100%;
}
.left-new .block-host-list .more-host>a{
text-decoration: none;
color: #a5c0e1;
}
.right-new,.right-new2{
width: 250px;
height: 242px;
float: left;
margin-left:10px;
margin-top:10px;
border:1px solid #f4f6fa;
}
.right-new>.new-notice,.right-new2>.close-notice{
width: 250px;
height: 40px;
background-color: #f4f6fa;
line-height: 40px;
}
.right-new .new-notice span>a,.right-new2 .close-notice span>a{
float: right;
margin-right:22px;
text-decoration: none;
color:#b8b8ba;
}
.right-new ul li,.right-new2 ul li{
list-style: none;
margin-top:15px;
font-size: 13px;
margin:15px 20px 0px 20px;
}
.right-new ul li>a,.right-new2 ul li>a{
text-decoration: none;
color:#b8b8ba;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display: block;
}
.right-new .new-notice>span{
color:#fec00b;
margin-left:20px;
}
.right-new2 .close-notice>span{
color:#54b8ee;
margin-left:20px;
}
.right-new ul li a>span{
color:#fec00b;
}
.right-new2 ul li a>span{
color:#54b8ee;
}
#footer{
width: 1264px;
height: 70px;
margin:0px auto;
background-color:#eceef2;
text-align: center;
line-height: 70px;
}
#footer>span{
color:#b8bbbc;
}
.left-new>.block-host-list{
height:461px;
border:1px solid #f4f6fa;
}
/* .left-new .block-host-list>.more-host{
width: 100%;
border:1px solid red;
float: left;
text-align: center;;
} */
*{margin:0;padding:0;}
.ui-search{
position: relative;
width: 326px;
height: 38px;
float:right;
color: #fff;
margin-right:131px;
margin-top:24px;
background: url(../img/ui-search.jpg) 0px 0px no-repeat;
}
.ui-search>.ui-search-selected{
line-height: 38px;
margin-left:10px;
}
.ui-search .ui-search-selected-list>ul{
list-style: none;
width: 68px;
background: #fff;
text-align:center;
line-height: 30px;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}
.ui-search .ui-search-selected-list ul li>a{
text-decoration: none;
color:#A6A6A6;
}
.ui-search .ui-search-selected-list ul>li:hover{
background-color:#5F5D5D;
}
.ui-search>.ui-search-input{
position: absolute;
top:1px;
left:68px;
width: 216px;
height: 36px;
border:none;
}
.ui-search>.ui-search-selected-search{
width: 40px;
height: 36px;
display: block;
position: absolute;
top:0px;
left:284px;
}
/* .ui-menu{
position: relative;
} */
.ui-menu-item:hover .ui-menu-item-detail>.ui-menu-item-detail-group{
display: block;
}
.ui-menu .ui-menu-item-detail>.ui-menu-item-detail-group>.ui-menu-item-detail-group-captionn{
width: 450px;
margin:0px auto;
color:#717071;
text-align: left;
font-weight: bold;
}
.ui-menu .ui-menu-item-detail .ui-menu-item-detail-group>.ui-menu-item-detail-group-list{
width: 450px;
margin:0px auto;
text-align: left;
margin-bottom: 30px;
}
.ui-menu .ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list>a{
text-decoration: none;
font-size: 13px;
color:#717071;
}
.ui-menu .ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list>a:after{
content: '|';
margin:0px 5px;
}
.ui-menu .ui-menu-item-detail>.ui-menu-item-detail-group{
display: none;
width: 500px;
height: 414px;
position: absolute;
background: url(../img/bg-menu.jpg) center no-repeat;
left:190px;
top:0px;
box-shadow:5px 5px 2px rgba(0, 0, 0, .1);
border:1px solid red;
z-index: 2;
}
.ui-menu>.ui-menu-item{
width: 190px;
height: 38px;
margin-left:2px;
position: relative;
}
.ui-menu>.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu>.ui-menu-item:hover .ui-menu-item-department{
color: #707170;
}
.ui-menu>.ui-menu-item:hover .ui-menu-item-disease{
color: #717071;
}
.ui-menu .ui-menu-item>a{
text-decoration: none;
}
.ui-menu .ui-menu-item>.ui-menu-item-department{
color:#fff;
float: left;
margin-left:36px;
}
.ui-menu .ui-menu-item>.ui-menu-item-department:before{
content:'';
display: block;
width: 22px;
height: 22px;
position: absolute;
left:5px;
top:8px;
background: url(../img/icon-menu.jpg) -22px 0px no-repeat;
}
.ui-menu>.ui-menu-item:hover>.ui-menu-item-department:before{
background-position: 0 0;
}
.ui-menu .ui-menu-item>.ui-menu-item-disease{
color:#fff;
font-size: 13px;
float:right;
margin-right:7px;
}写回答
2回答
-
同学你好，让二级菜单根据左侧整体内容定位就可以了（红色框相对于黑色框定位）。
建议修改后再测试下。
如果帮助到了你，欢迎采纳~祝学习愉快~
0h019-10-12 -
weixin_慕移动6442865
提问者
2019-10-12
你好老师，问题已解决。
0
相似问题