<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例 百度提示菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content:'';
display: block;
height: 0;
clear:both;
}
.header{
border-bottom: 1px solid #f2f2f2;
}
.header .top_right{
margin-right: 100px;
float: right;
}
/*
* 问题：导航栏li中line-height不仅设置导航栏的li的高度，
* 还设置了ul实现的隐藏菜单的li高度
* 解决：隐藏菜单不要用ul实现，避免高度继承，
* 而无法通过隐藏菜单li的line-height设置隐藏菜单的高度。
*/
.header .top_right li{
display: inline-block;
font-size: 12px;
font-family: arial;
list-style: none;
line-height: 32px;
color: #555;
padding: 0 10px;
cursor: pointer;
}
.header ul li:hover{
color: #38f;
}
.header .s_user_set_e{
position: relative;
}
.header .s_user_set_menu{
position: absolute;
top: 32px;
left: 9%;
background-color: #fff;
display: none;
}
.header .s_user_set_menu div{
border: 1px solid #e3e3e3;
box-shadow: 1px 1px 5px #d1d1d1;
}
.header .s_user_set_menu a{
display: block;
font-size: 12px;
font-family: arial, "microsoft yahei";
color: #000;
line-height: 25px;
padding: 0 10px;
text-decoration: none;
}
.header .s_user_set_menu a:hover{
background-color: #38f;
color: #fff;
text-decoration: none;
}
.arrow{
position: absolute;
top: -10px;
left: 42%;
}
.arrow i,.arrow em {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
display: block;
position: absolute;
border: 5px solid transparent;
}
.arrow em{
border-bottom-color: #fff;
}
.arrow i {
border-bottom-color: #d1d1d1;
top: -1px;
}
.header .search_set_e{
position: relative;
}
.header .search_set_e .search_set_menu{
position: absolute;
display: none;
top: 32px;
left: -25%;
background-color: #fff;
border: 1px solid #e3e3e3;
box-shadow: 1px 1px 5px #d1d1d1;
list-style: none;
}
.header .search_set_e .search_set_menu li{
width: 48px;
padding: 0 10px;
color: #000;
}
.header .search_set_e .search_set_menu li:hover{
background-color: #38f;
color: #fff;
}
</style>
</head>
<body>
<div class="header clearfix">
<ul class="top_right">
<li id="s_user_set_e" class="s_user_set_e">jiecai121513
<div id="s_user_set_menu" class="s_user_set_menu">
<div class="arrow">
<i></i>
<em></em>
</div>
<div>
<a href="#">个人中心</a>
<a href="#">账号设置</a>
<a href="#">退出</a>
</div>
<span class="menu_arrow"><em></em></span>
</div>
</li>
<li id="search_set_e" class="search_set_e">设置
<ul id="search_set_menu" class="search_set_menu">
<li>搜索设置</li>
<li>高级搜索</li>
<li>隐私设置</li>
<div class="arrow">
<i></i>
<em></em>
</div>
</ul>
</li>
</ul>
</div>
<script>
var tip = [{},{}];/*不能直接写var tip*/
tip[0].main = document.getElementById("s_user_set_e");
console.log(tip[0].main);
tip[0].tip = document.getElementById("s_user_set_menu");
tip[0].main.onmouseenter = function(){
window.clearTimeout(tip[0].timer);
tip[0].tip.style.display = "block";
}
tip[0].main.onmouseleave = function(){
tip[0].timer = window.setTimeout(function(){
tip[0].tip.style.display = "none";
//window.clearTimeout(tip[0].timer);
},200);
}
tip[1].main = document.getElementById("search_set_e");
console.log(tip[1].main);
tip[1].tip = document.getElementById("search_set_menu");
tip[1].main.onmouseenter = function(){
window.clearTimeout(tip[1].timer);
tip[1].tip.style.display = "block";
}
tip[1].main.onmouseleave = function(){
tip[1].timer = window.setTimeout(function(){
tip[1].tip.style.display = "none";
},200);
}
</script>
</body>
</html>
