javascript - I have an unordered list that is being interfered with somehow. the list text displays properly, but the hover positioning is being offset somehow? -
i have unordered list being interfered somehow. list text displays properly, hover positioning being offset somehow? first list item's hover effect aligned perfectly, second , third off same increment. when isolate list code, displays , functions perfectly. supposed "responsive web design," has been styled columns control layout in 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; } {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; } /* mobile phones: */ [class*="col-"] { width: 100%; } @media screen , (min-width: 450px) { /* 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 screen , (min-width: 600px) { /* 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 screen , (min-width: 768px) { /* 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: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 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; }
Comments
Post a Comment