Javascript 我有一份无序的名单，不知怎么地被干扰了。列表文本显示正确，但悬停位置不知怎么被偏移了？
我有一份无序的名单，不知怎么地被干扰了。列表文本显示正确，但悬停位置不知怎么被偏移了？第一个列表项的悬停效果完全对齐，但第二个和第三个列表项以相同的增量禁用。 当我隔离列表代码时，它会完美地显示和运行。 这应该是一个“响应性网页设计”，因此它被设置为控制网格显示中布局的列 HTML:Javascript 我有一份无序的名单，不知怎么地被干扰了。列表文本显示正确，但悬停位置不知怎么被偏移了？,javascript,html,css,Javascript,Html,Css,我有一份无序的名单，不知怎么地被干扰了。列表文本显示正确，但悬停位置不知怎么被偏移了？第一个列表项的悬停效果完全对齐，但第二个和第三个列表项以相同的增量禁用。 当我隔离列表代码时，它会完美地显示和运行。 这应该是一个“响应性网页设计”，因此它被设置为控制网格显示中布局的列 HTML: 太多的代码。。。。。。。！请看，您的页面有5个图像和1个css文件，它们具有相对路径。图像可能是导致问题的一个因素，外部css文件test\u page.css肯定需要检查。您应该使用绝对路径或使用 <!DO
太多的代码。。。。。。。！请看，您的页面有5个图像和1个css文件，它们具有相对路径。图像可能是导致问题的一个因素，外部css文件
test\u page.css<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test_page.css">
<title>Test Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="view2DIV"> <!-- VIEW 2 START -->
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-3 col-t-3 col-m-3"></div>
<div class="col-2 col-t-2 col-m-2"><a href="Test
Site/TestSite2/test_page.html"><img src="logo_black.png" alt="logo"></a></div>
<div class="col-2 col-t-2 col-m-2"></div>
<div class="col-2 col-t-2 col-m-2">
<button id="button_Style" type="button">
<img class="buttonIMG_style" src="shoppingBag.png" alt="corner_symbols">
</button>
<button id="MENUbutton_Style" type="button" onclick="viewMENUFunction()">
<img class="buttonIMG_style" src="sliderMenuIcon.png" alt="corner_symbols">
</button>
<button id="x_button_Style" type="button" onclick="clearMENUFunction()">
<img class="buttonIMG_style" src="x_icon.png" alt="corner_symbols">
</button>
<script>
function viewMENUFunction() {
document.getElementById("MenuDIV").style.display = "block";
document.getElementById("view2DIV").style.position = 'relative';
document.getElementById("view2DIV").style.right = "400px";
document.getElementById("x_button_Style").style.display = "inline";
document.getElementById("MENUbutton_Style").style.display = "none";
document.getElementById("button_Style").style.display = "none";
}
function clearMENUFunction() {
document.getElementById("view2DIV").style.position = 'relative';
document.getElementById("view2DIV").style.right = "150px";
document.getElementById("x_button_Style").style.display = "none";
document.getElementById("MENUbutton_Style").style.display = "inline";
document.getElementById("button_Style").style.display = "inline";
document.getElementById("MenuDIV").style.display = "none";
}
</script>
</div>
<div class="col-3 col-t-3 col-m-3">
<div id="MenuDIV">
<span style="margin:0 80px 0 40px">Search</span>
<img src="search_icon.png" alt="search_icon" style="width:25px;height:25px;margin:10px 10px 5px 20px">
<hr width="75%">
<br />
<div id="menuList">
<ul>
<li>VACATIONS</li>
<li>SHOP</li>
<li>OUR STORY
<ul>
<li>Item ONE</li>
<li>Item TWO</li>
<li>Item THREE</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- CLOSE view2 DIV -->
</body>
</html>
body{
font-family:arial;
color: white;
}
a {text-decoration:none}
/* START OF MAIN PAGE STYLES */
/* START OF view 2 STYLES */
#view2DIV{
display: none;
}
.FontStyle {
margin: 15px 0 0 0;
font: 25px arial, sans-serif;
color: black;
}
.buttonIMG_style{
width:40px;
height:30px;
}
#button_Style{
background:transparent;
border:none;
outline:none;
cursor:pointer;
}
#MENUbutton_Style{
background:transparent;
border:none;
outline:none;
cursor:pointer;
}
#x_button_Style{
display: none;
background:transparent;
border:none;
outline:none;
cursor:pointer;
}
#MenuDIV{
display: none;
background: black;
color: white;
position: fixed;
top: 0;
right: 30%;
width: 25%;
height: 100%;
}
/* END OF view 2 STYLES */
/* START OF RESPONSIVE WEB DESIGN COLUMN STYLES */
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 450px) {
/* For medium: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.row:after {
content: "";
clear: both;
display: block;
}
/* END OF RESPONSIVE WEB DESIGN COLUMN STYLES */
#menuList ul {
list-style-type: none;
display:block;
}
#menuList ul li {
border: 1px solid red;
display:block;
margin: 0;
padding: 0;
font: bold 15px/21px sans-serif;
position: relative;
padding: 5px 105px 5px 5px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#menuList ul li:hover {
text-decoration: underline;
}
ul li ul {
text-align: center;
padding: 0;
position: absolute;
top: 25px;
left: 0;
width: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}