* 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>

<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>