I have an unordered list that is being interfered with somehow. the list text displays properly, but the hover positioning is being offset somehow? The first list item's hover effect is aligned perfectly, but the second and third are off by the same increment. When i isolate the list code, it displays and functions perfectly. This is supposed to be a "responsive Web Design," so it has been styled with columns that control the layout in a grid display.
HTML:
<!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>
CSS:
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;
}
