1
제가 작업하고있는 드롭 다운 메뉴가 있는데 찾을 수없는 버그가 있습니다. 이것은 Wordpress 사이트이므로 테마가 이미 만들어져 있습니다. 그러나 메뉴 레이아웃을 변경하려고 할 때, 나는 약간의 버그를 보았습니다.CSS3 드롭 다운 메뉴의 버그
사이트는 현재 http://redballoontoystore.com/e입니다. 나는 당신이 코드를 원한다는 것을 알고 있지만, 복사 및 붙여 넣기 코드가 버그를 가지고 있는지 나는 모른다. 문제를 찾기 위해 방화범을 사용하려고합니다. '장난감'위로 마우스를 가져 가면 드롭 다운 메뉴가 모두 엉망입니다.
기본 구조는
<div id="categories">
<ul>
<li>
<ul class="sub-menu">
<li>
<ul class="sub-menu">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
입니다 그리고 CSS의 일부는 내가 문제를 발견
#main_navigation {
z-index: 10;
position: relative;
margin-bottom: 30px;
}
#main_navigation > .s_wrap > .s_col_12 {
position: relative;
border-top: 1px solid #e6e6e6;
}
#categories {
clear: both;
<?php if ($language == 'ltr'): ?>
float: left;
<?php else: ?>
float: right;
<?php endif; ?>
padding: 13px 0 0 0;
}
#categories > ul {
margin-bottom: 14px;
}
#categories > ul > li,
#categories > ul > li > a
{
position: relative;
height: 32px;
line-height: 32px;
}
#categories > ul > li > a {
padding: 0 10px;
}
#categories > ul > li:hover > a,
#categories > ul > li > a:hover
{
color: #fff;
}
#categories > ul > li > .sub-menu,
#cart_menu .s_submenu
{
width: 200px;
padding: 10px 15px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
ul.sub-menu > li > ul { /*Added by David*/
width: 100%;
padding: 0px 15px;
clear: left;
}
#categories .sub-menu > li {
<?php if ($language == 'ltr'): ?>
float: left;
clear: left;
<?php else: ?>
float: right;
clear: right;
<?php endif; ?>
width: 185px;
line-height: 20px;
}
#categories .sub-menu > li:before {
top: 13px;
}
#categories .sub-menu > li > a {
display: block;
padding: 5px 0;
}
#categories .sub-menu > li:hover {
position: relative;
}
/*****#categories .sub-menu li:hover > ul {****/
/***** display: block; ****/ /*Commented out by David*/
/****} ****/
#categories .sub-menu > ul {
position: absolute;
/*top: -10px;*/
left: 96%;
/*display: none;*/
}
#categories .s_submenu li.s_selected > a {
font-weight: bold;
}