我正在处理一个多切换下拉菜单，功能似乎正常，但有一个轻微的样式问题很麻烦...我在删除下拉图像之间的小白色差距时遇到问题将切换到列出项目。我想删除下拉菜单项和切换图像下面的图像之间的小白色填充...希望这有意义......下面是html，css和js。
提前收到任何帮助！
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Dan Meier/ Designer</title>
<meta name="description" content="Portfolio of Dan Meier">
<meta name="keywords" content="Freelance, Design, Illustration, Graphics, Website Design, UI, User Interface, Digital Design">
<meta name="author" content="Dan Meier">
<!-- Stylesheets -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<style>
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #ffffff;
}
<!-- All Projects -->
<div id="projects_container_new">
<div id="all_projects">
<div class="col1">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><img class="thumb_image" src="images/UX-UI-Dev_cover.jpg"><i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<div class="thumb" data-url="project_thesis.html" data-num="0">
<div class="thumb_title"><span class="thumb_client">Published Thesis Work</span><br />Algorithm & Parametric Design</div>
<div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
<img class="thumb_image" src="images/thesis_cover.jpg">
</div>
<div class="thumb" data-url="project_conceptualthinking.html" data-num="3">
<div class="thumb_title"><span class="thumb_client">Conceptual Thinking</span><br />Visual Design</div>
<div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
<img class="thumb_image" src="images/design_cover.jpg">
</div>
</ul>
</li>
<div class="thumb" data-url="project_thesis.html" data-num="0">
<div class="thumb_title"><span class="thumb_client">Published Thesis Work</span><br />Algorithm & Parametric Design</div>
<div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
<img class="thumb_image" src="images/thesis_cover.jpg">
</div>
</ul>
<!-- scripts -->
<script>// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};//@ sourceURL=pen.js
</script>
<script src="/assets/common/localstorage.js"></script><script src="/assets/post/scroll/remember_scroll.js"></script><script>RememberScroll.init();</script>
</body>
</html>
样式CSS：
html, body {
margin: 0;
padding: 0;
background: #ffffff;
font-family: "adelle-sans", Helvetica, Arial, sans-serif;
font-weight: 400;
font-style: normal;
color: #ffffff;
font-size: 13px;
line-height: 22px;
overflow-y: auto;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* -------- Projects --------- */
#projects_container_new {
width: 100%;
height: auto;
position: absolute;
top: 95%;
margin: 0 auto 0 auto;
}
#all_projects {
z-index: 999;
max-width: 1200px;
margin: -2% auto 0 auto;
padding: 0 40px 120px 40px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
#all_projects .col1 {
z-index: 999;
float: left;
width: 90%;
height:auto;
background-color: ;
position: relative;
display: block;
}
#all_projects .col2 {
z-index: 999;
float: left;
width: 90%;
background-color: #ffffff;
position: relative;
display: block;
}
#all_projects .col3 {
z-index: 999;
float: left;
width: 90%;
background-color: #ffffff;
position: relative;
display: block;
}
#all_projects .col1b {
z-index: 999;
float: left;
width: 90%;
background-color: #ffffff;
position: relative;
display: none;
}
#all_projects .col2b {
display: none;
z-index: 999;
float: left;
width: 50%;
background-color: #ffffff;
position: relative;
display: none;
}
#all_projects .col1c {
z-index: 999;
float: left;
width: 90%;
background-color: #ffffff;
position: relative;
display: none;
}
#all_projects .thumb {
position: relative;
margin: 0;
padding: 0;
font-weight: 600;
font-style: normal;
color: #ffffff;
text-align: left;
overflow: hidden;
cursor: pointer;
}
#all_projects .thumb .thumb_title {
z-index: 999;
position: absolute;
margin: 0 0 6% 5%;
bottom: 0;
left: 0;
padding: 0;
font-size: 18px;
line-height: 18px;
cursor: pointer;
color:#ffffff;
}
#all_projects .thumb .thumb_client {
z-index: 999;
font-size: 12px;
cursor: pointer;
}
#all_projects .thumb .thumb_image {
margin: 0;
padding: 0;
width: 100%;
display: block;
}
#all_projects .thumb .thumb_hover {
z-index: 998;
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
overflow: hidden;
display: block;
background-image: url("../images/hoverdark.png");
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
cursor: pointer;
}
#all_projects .thumb .view_project {
z-index: 999;
position: absolute;
width: 120px;
height: 60px;
top: 70%;
left: 50%;
margin: -30px 0 0 -60px;
display: block;
text-align: center;
font-family: "adelle-sans", Helvetica, Arial, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
line-height: 17px;
text-transform: uppercase;
color: #000000;
background-image: url("../images/hover-icon.png");
background-repeat: no-repeat;
background-position: center bottom;
opacity: 0;
filter:alpha(opacity=0);
}