弄了一个 顶部导航，hover 弹出的下拉菜单
在最侧边的 就跑到外面去了，单独调节位置也是可以的，但觉的很Low
以后也要用到 鼠标右键菜单，也不可能去一个个调节。
请教合理的解决办法。
这个 dom元素 一般是position aboslute , 可否有什么语句在css或 scss中， 判断是屏幕边上就搞整位置
另外 我用了这个方法，F12 提示是 建议不要用这个方法
window.onresize = ()=>{ // 监听屏幕大小, 根据高度来调整 表格单页的高度
currentHeight.value= window.innerHeight
}
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<style type="text/css">
#menu,#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu:after {
content:"";
display: block;
clear: both;
}
#menu>li {
position: relative;
width: 300px;
height: 20px;
float: left;
background-color: #9ff;
transition: background-color 300ms;
}
#menu>li:hover {
background-color: #9cf;
}
#menu>li>ul {
position: absolute;
top: 100%;
left: 0;
background-color: #cff;
display: none;
}
#menu>li:hover>ul {
display: block;
}
#menu>li li:hover {
background-color: #99f;
}
</style>
</head>
<body>
<ul id="menu">
<li>菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
<li>子菜单1-3</li>
<li>子菜单1-3</li>
</ul>
</li>
<li>菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
<li>子菜单1-3</li>
<li>子菜单1-3</li>
</ul>
</li>
<li>菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
<li>子菜单1-3</li>
<li>子菜单1-3</li>
</ul>
</li>
<li>菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
<li>子菜单1-3</li>
<li>子菜单1-3</li>
</ul>
</li>
<li>菜单2
<ul>
<li>子菜单2-1</li>
<li>子菜单2-2</li>
<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbg</li>
</ul>
</li>
<li>菜单3
<ul>
<li>111111111111111111111111111111zbbbbbbzzzzzzzzzzza</li>
<li>子菜单3-2</li>
<li>子菜单3-3</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var dr = document.querySelectorAll("#menu>li");
for (var i = 0; i < dr.length; i++) {
dr[i].addEventListener("mouseenter", function (e) {
var ul = this.querySelector("ul");
ul.style.left = "0px";
ul.style.right = "auto";
var er = ul.getBoundingClientRect().right;
var ww = window.innerWidth;
if (er > ww) {
ul.style.right = "0px";
ul.style.left = "auto";
}
}, false);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
.box {
width: 100%;
height: 200px;
background-color: skyblue;
}
.text {
float: left;
margin: 0 300px 0 300px;
height: 200px;
}
.left {
width: 300px;
height: 200px;
background-color: #7aff9b;
/*margin-left 一个负值，就会挤到上边*/
margin-left: -100%;
}
.right {
width: 300px;
height: 200px;
background-color: rgba(0, 0, 0, .1);
/*右边的框，只需给他的margin-left一个负的宽度，就能挤上去*/
margin-left: -300px;
opacity: 0.6;
}
.col {
float: left;
}
</style>
</head>
<body>
<div class="box col">
<div class="text">
main
</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</body>
</html>