* the drop-down menu appears when the OnClick implementation clicks the main menu, but it has been implemented but there is a problem, ask for help! *

1. When you click "View Baby by Category", the drop-down menu appears. How to make the drop-down menu disappear when you click on the blank space or click "View Baby by Category"?

2. How to solve the positioning problem: if you put my code in the total code (full page), when you click "View Baby by Category", the page will move (move to the top). How to fix the page in the position when you click "View Baby by Category"?

I want to use concise and practical js code as much as possible (if you use jquery, please use code that does not need to reference external files)! Can you change / add the code?

the picture that appears on the previous click and then the drop-down menu:

here is the code for the drop-down menu to appear after clicking (too busy to clean up the code for the time being, please forgive me): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equip="Content-Type" content="text/html" charset="UTF-8"/>
    <title></title>
<style>
*    {margin:0 auto;padding:0;}
body    {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    }
a {text-decoration:none;}
.clear    {clear:both;zoom:1;height:0;line-height:0;font-size:0;}
.mid-board-holder    {
            width:1016px;height:;margin-top:24px;border:0px solid;
            padding-top:0px;padding-bottom:0px;
            text-align:center;
            }
.mid-board-container-L    {float:left;border:0px solid;
            
            }
.mid-board-container-L ul {
            list-style:none;float:left;clear:both;zoom:1;
              width:236px;height:;border:0px solid;
            padding-bottom:34px;
              }
.mid-board-container-L li { text-align:left;
               padding-top:0;text-indent:6px;
              border-radius:3px;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;border:0px solid;
               }

.mid-board-container-L ul li span {float:right;
                margin-right:12px;border:0px solid;
                width:50px;text-align:right;overflow:hidden;
                white-space:nowrap;text-overflow:ellisis;
                }                 
.mid-board-container-L li a { border:0px solid;
               font-size:14px;color:-sharp444;
               font-family:Arial,                                              Microsoft YaHei,Simsun;
               padding-left:0px;padding-right:0px;
               line-height:38px;
               width:236px;height:38px;
               }
.mid-board-container-L li a:hover {float:left;
                  background-color:-sharpf2f2f2;
                  }
.mid-board-container-L .custom    {clear:both;float:left;
                width:234px;height:36px;
                background-color:-sharpf56400;
                border:1px -sharpdc5a00 solid;
                border-radius:3px;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;
                font-size:14px;color:-sharpfff;font-weight:400;
                line-height:36px;font-family:Microsoft                             YaHei,Simsun;
                }
.mid-board-container-L .custom a {color:-sharpfff;}
.mid-board-container-L .contact    {clear:both;float:left;
                width:234px;height:34px;margin-top:12px;
                background-color:-sharpfff;
                border:1px -sharpd9d9d9 solid;
                border-radius:3px;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;
                font-size:14px;color:-sharp444;font-weight:400;
                line-height:34px;font-family:Microsoft                             YaHei,Simsun;
                }
.mid-board-container-L .contact a {color:-sharp444;}


.store-items    {float:left;font-size:16px;font-weight:700;line-height:16px;
        font-family:Microsoft YaHei,Simsun;padding:0;margin:0;
        padding-bottom:24px;color:-sharp444;padding-top:20px;
        }
.mid-board-secline,.mid-board-secline1    {float:left;clear:both;
    width:236px;border-top:1px -sharpe1e3df solid;
    margin-top:30px;margin-bottom:36px;
    }
.mid-board-secline1    {marigin-top:32px;margin-bottom:27px;}
.mid-board-sales,.report    {float:left;clear:both;
        float:left;clear:both;line-height:14px;
        font-family:Arial,Microsoft YaHei,Simsun;
        font-size:14px;color:-sharp444;font-weight:400;
        }
.mid-board-sales a,.report a    {color:-sharp444;}        
.mid-board-container-R    {float:left;border:0px solid;
            width:762px;margin-left:18px;
            }
.mid-board-container-R .sortbox    {
                float:right;clear:both;line-height:36px;
                width:166px;height:36px;
                border:1px -sharpd9d9d9 solid;
                border-radius:3px;
                   -moz-border-radius:3px;
                   -webkit-border-radius:3px;
                }
.mid-board-container-R .sortbox .sort-icon {
                float:right;margin-right:12px;margin-top:15px;
                }
.mid-board-container-R .sortbox .sort    {font-size:12px;color:-sharp888;
                    font-family:Microsoft YaHei,Simsun;
                    margin-left:12px;float:left;
                    line-height:34px;
                    }
.mid-board-container-R .sortbox .sort a    {color:-sharp888;}

.mid-board-container-R .sortbox .dmenu ul {float:left;clear:both;
                       margin-top:4px;position:relative;
                      z-index:10000;
                      top:4px;left:-30px;
                      list-style:none;
                      border:1px -sharpe5e5e5 solid;
                      width:196px;height:180px;
                      border-radius:3px;
                    -webkit-border-radius:3px;
                    -moz-border-radius:3px;
                    display:none;
                      }
.mid-board-container-R .sortbox .dmenu li {text-align:left;
                      font-size:12px;color:-sharp;
                      font-family:Microsoft YaHei,Simsun;                          
                      }
.mid-board-container-R .sortbox .dmenu li a {padding-left:0px;text-indent:18px;
                        clear:both;float:left;
                        color:-sharp444;line-heigth:30px;
                        width:196px;
                        background-color:-sharpfff;float:left;
                        }
.mid-board-container-R .sortbox .dmenu li a:hover {
                          background-color:-sharpf5f5f5;
                          }
.mid-board-cardL {padding:0;
        float:left;width:241px;height:192px;margin-right:0px;
        border-radius:3px;border:0;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;border:0px -sharp solid;
        object-fit:cover;
        }
.mid-board-cardR {padding:0;
        float:left;width:242px;height:192px;margin-right:0px;
        border-radius:3px;border:0;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;border:0px -sharp solid;
        object-fit:cover;
        }
.mid-board-container-R .more-items a {color:-sharp666;}
.store-cmmt-holder    {
            width:1016px;margin-top:48px;
            }
</style>
<script>
function showDmenu(){
    var obj = document.getElementById("show_dmenu")
     obj.style.cssText = "display:block;"
}
</script>
</head>
<body>

<!---->
<div class="mid-board-holder">
   <div class="mid-board-container-L">
    <p class="store-items">

    <ul>
    <li style="background-color:-sharpf2f2f2;"><a href="">                <span>668</span></a></li>
    <li><a href="-sharp"><span>5</span></a></li>
    <li><a href="-sharp"><span>156</span></a></li>
    <li><a href="-sharp"><span>16</span></a></li>
    <li><a href="-sharp"><span>33</span></a></li>
    <li><a href="-sharp"><span>2</span></a></li>
    <li><a href="-sharp"><span>3</span></a></li>
    <li><a href="-sharp"><span>36</span></a></li>
    <li><a href=""><span>1</span></a></li>
    <li><a href="-sharp"><span>7</span></a></li>
    </ul>
    <div class="custom" style=""><a href="-sharp"></a></div>
    <div class="contact"><a href="-sharp"></a></div>
    <hr0 class="mid-board-secline"></hr0><p class="mid-board-sales">
        4312

    <hr0 class="mid-board-secline1"></hr0><p class="mid-board-sales">
        <a href="-sharp"></a>

    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    </div>
   <div class="mid-board-container-R">
       <div style= "clear:both;height:38px;margin-bottom:12px;
    margin-top:10px;">
    <div class="sortbox">
        <span class="sort"><a href="-sharp" onclick="showDmenu()">
        </a></span>
        <img src="store-sortbox-icon.png" class="sort-icon"/>
        <div class="dmenu" >
        <ul id="show_dmenu">
        <li><a href="-sharp"></a></li>
        <li><a href="-sharp">
</a></li>
        <li><a href="-sharp">
</a></li>
        <li><a href="-sharp">
</a></li>
        <li><a href="-sharp">
</a></li></ul></div>
    </div></div>      
 </div>
<div class="clear"></div>
</div>
</body>
</html>
Javascript css html
Mar.04,2022

layout needs to be adjusted; 

<div style="position:relative;">
    <div style="height:25px;"></div>
    <ul style="position:absolute;top:30px;left:20px;">
        <li><a href="-sharp"><span>5</span></a></li>
        <li><a href="-sharp"><span>156</span></a></li>
    </ul>
</div>

layout in the above way, fine-tune the style, you can achieve the effect you said. The problem of positioning, figure out how to layout OK!

Previous: The js control pop-up box pops up only once when logging in.

Next: Mini Program: load more pages without scroll-view,. Is there any way to tell if you slide to the bottom?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu