弄了一个 顶部导航，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>
或者用css的@media screen and (max-width: 1500px)
当屏幕小于1500px时最右边下拉菜单调整位置
不过需要人为指定max-width: 1500px
<!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;
}
@media screen and (max-width: 1500px) {
#menu>li:nth-last-child(1)>ul {
left: auto;
right: 0px;
}
}
@media screen and (max-width: 1300px) {
#menu>li:nth-last-child(2)>ul {
left: auto;
right: 0px;
}
}
</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>菜单2
<ul>
<li>子菜单2-1</li>
<li>子菜单2-2</li>
<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbg</li>
</ul>
</li>
<li>菜单3
<ul>
<li>111111111115656565656561111111111111111111zbbbbbbzzzzzzzzzzza</li>
<li>子菜单3-2</li>
<li>子菜单3-3</li>
</ul>
</li>
</ul>
</body>
</html>
系统已结题
5月29日
已采纳回答
5月22日
修改了问题
5月20日
创建了问题
5月20日
公安备案号11010502030143
