html单击出现下拉菜单,*OnClick实现点击主菜单时出现下拉菜单，已实现但是有问题，求助！*...-CSDN博客

1.点击“按类别查看宝贝”时，下拉菜单出现了，怎样在点击空白处或者点击“按类别查看宝贝”时，让下拉菜单消失？

2.怎么解决定位问题：如果把我这段代码放到总代码里面(全页面中)，点击“按类别查看宝贝”时，页面会发生移动(移动到顶端)，怎样让页面固定在点击“按类别查看宝贝”时的位置？

希望尽量用简洁实用的js代码(如果用jquery的话，请用不需要引用外部文件的代码)实现！能给改下/加一下代码么？

先上上个点击后下拉菜单出现的图：

bVblrWL?w=1288&h=734

这里是实现点击后出现下拉菜单的代码(工作太忙，暂无暇整理代码，请原谅)：

演示页面

* {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:#444;

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:#f2f2f2;

}

.mid-board-container-L .custom {clear:both;float:left;

width:234px;height:36px;

background-color:#f56400;

border:1px #dc5a00 solid;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

font-size:14px;color:#fff;font-weight:400;

line-height:36px;font-family:Microsoft YaHei,Simsun;

}

.mid-board-container-L .custom a {color:#fff;}

.mid-board-container-L .contact {clear:both;float:left;

width:234px;height:34px;margin-top:12px;

background-color:#fff;

border:1px #d9d9d9 solid;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

font-size:14px;color:#444;font-weight:400;

line-height:34px;font-family:Microsoft YaHei,Simsun;

}

.mid-board-container-L .contact a {color:#444;}

.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:#444;padding-top:20px;

}

.mid-board-secline,.mid-board-secline1 {float:left;clear:both;

width:236px;border-top:1px #e1e3df 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:#444;font-weight:400;

}

.mid-board-sales a,.report a {color:#444;}

.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 #d9d9d9 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:#888;

font-family:Microsoft YaHei,Simsun;

margin-left:12px;float:left;

line-height:34px;

}

.mid-board-container-R .sortbox .sort a {color:#888;}

.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 #e5e5e5 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:#;

font-family:Microsoft YaHei,Simsun;

}

.mid-board-container-R .sortbox .dmenu li a {padding-left:0px;text-indent:18px;

clear:both;float:left;

color:#444;line-heigth:30px;

width:196px;

background-color:#fff;float:left;

}

.mid-board-container-R .sortbox .dmenu li a:hover {

background-color:#f5f5f5;

}

.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 # 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 # solid;

object-fit:cover;

}

.mid-board-container-R .more-items a {color:#666;}

.store-cmmt-holder {

width:1016px;margin-top:48px;

}

function showDmenu(){

var obj = document.getElementById("show_dmenu")

obj.style.cssText = "display:block;"

}