今天下午仿写百度首页，练习巩固HTML基础，遇到一些问题，特来请教：
下面是HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">
<title>百度一下，你就知道</title>
<link rel="stylesheet" href="./style/base.css">
<link rel="stylesheet" href="./style/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div class="top">
<div class="top-left">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#" id="more">更多</a>
<div class="more">
<div class="fline">
<a href="#"><img src="./source/冰淇淋球.png" alt="冰淇淋"><div class="ptn">冰淇淋</div></a>
<a href="#"><img src="./source/指南针.png" alt="指南针"><div class="ptn">指南针</div></a>
<a href="#"><img src="./source/果汁.png" alt="果汁"><div class="ptn">果汁</div></a>
<a href="#"><img src="./source/椰汁.png" alt="椰汁"><div class="ptn">椰汁</div></a>
</div>
<div class="sline">
<a href="#"><img src="./source/游泳圈.png" alt="游泳圈"><div class="ptn">游泳圈</div></a>
<a href="#"><img src="./source/照相机.png" alt="照相机"><div class="ptn">照相机</div></a>
<a href="#"><img src="./source/西瓜.png" alt="西瓜"><div class="ptn">西瓜</div></a>
<a href="#"><img src="./source/雪糕.png" alt="雪糕"><div class="ptn">雪糕</div></a>
</div>
<div class="toall">查看全部百度产品 ></div>
</div>
</div>
<div class="top-right">
<a href="#">抗击肺炎</a>
<a href="#" id="seting">设置</a>
<a href="#">登录</a>
<div class="seting">
<div class="setings">
<a href="#">搜索设置</a>
<a href="#">高级搜索</a>
<a href="#">关闭预测</a>
<a href="#">隐私设置</a>
<a href="#">关闭热榜</a>
<a href="#">开启热榜</a>
</div>
</div>
</div>
</div>
<div class="logo">
<img src="./source/logo.png" alt="logo">
</div>
<div class="search">
<input type="text" placeholder="百度一下">
<button class="bdyx">百度一下</button>
</div>
<script>
$(document).ready(function(){
//划过更多，显示
$('#more').mouseover(function() {
$('.more').show();
});
$('#more').mouseleave(function() {
$('.more').hide();
});
//滑到显示层，继续显示
$('.more').mouseover(function(){
$(this).show();
});
$('.more').mouseleave(function() {
$(this).hide();
});
//设置
$('#seting').mouseover(function(){
console.log('#setshow');
$('.seting').show();
});
// $('#seting').mouseleave(function(){
// $('.seting').hide();
// });
$('.steing').mouseenter(function(){
console.log('setshow');
$(this).show();
});
$('.seting').mouseleave(function() {
$(this).hide();
});
});
</script>
</body>
</html>
然后是css代码：
/*base.css*/
body {
margin: 0;
padding: 0;
font:12px arial;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
color: #4e6ef2;
}
/*index.css*/
.top{
font:13px/23px 'PingFang SC',Arial,'Microsoft YaHei',sans-serif;
}
.top a{
color: #222;
}.top a:hover{
color: #4e6ef2;
}
.top-left a {
margin-left: 28px;
}
.top-left{
margin-top: 19px;
float: left;
}
.top-right{
float: right;
margin-top: 19px;
}
.top-right>a{
margin-right: 40px;
}
.top-right>a:first-child{
color: red;
}
.seting{
height: 170px;
width: 90px;
display: none;
position: absolute;
top: 50px;
right: 75px;
border-radius: 12px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
text-align: center;
}
.setings{
display: flex;
flex-direction: column;
}
.seting a{
margin-top: 5px;
}
.logo {
text-align: center;
}
.logo img {
margin: 50px auto;
margin-bottom: 0;
height: 170px;
width: 270px;
margin-left: -235px;
}
.search {
/* text-align: center; */
margin: 0 auto;
display:flex;
width: 33%;
}
.search input{
border-radius: 10px 0 0 10px;
width: 30%;
height: 16px;
border: 2px solid #c4c7ce;
padding: 12px 16px;
flex: 4;
outline: none;
border-right: none;
/* float: left; */
}
.search input:focus {
border: 2px solid #4e6ef2;
}
.search button {
/* float: left; */
flex:1;
font-size: 400;
background-color: #4e6ef2;
color:#fff;
border-radius: 0 10px 10px 0;
box-shadow: none;
border:none;
}
.more {
width: 304px;
height: 223px;
display: none;
position: absolute;
top: 45px;
left: 120px;
border-radius: 12px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
text-align: center;
padding-top: 50px;
}
.more img {
height: 40px;
width: 40px;
}
/* .more a {
display: flex;
flex-direction: column;
} */
.more .fline{
display: flex;
margin-bottom: 20px;
}
.more .sline{
display: flex;
margin-bottom: 20px;
}
现在的问题是，当我鼠标经过“更多”和“设置”这两个选项时，我不能实现百度首页的那种效果。
在这个图里他放在更多上会出现，我的也会，但是当我展示的和他一样时，我不能做到当我鼠标经过“更多”的时候产品选项会停留。当我把moreclass的top值缩小到和“更多”有重合时，我的动效和他一样，但是
在这里和他是与差异的。
我有哪些css属性去利用或者我的结构有什么问题可以去改进达到相同的效果？
这是我第一个疑问。
第二点是，在设置那里，我用同样的方式去实现的时候得不到相同的结果。
这就是我的两点疑惑，请大家帮忙解答一下。
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
