2
저는 현재 사이드 바의 오른쪽으로 토글 할 드롭 다운 메뉴를 만들고 있습니다. 드롭 다운 메뉴에서 파란색을 제거하고 싶습니다. Foundation 5를 사용하여 드롭 다운 메뉴를 만듭니다. 여기 드롭 다운 기초 5에서 파란색 강조 색상을 제거하는 방법?
내가 만들어 놓은 screenshot of dropdown 아래 내가하는 SCS 기본값 재단이 제공하는 사용자 지정하거나 자신의 CSS로 그들을 무시
.f-dropdown1 {
\t display: none;
\t left: -9999px;
\t list-style: none;
\t margin-left: 0;
\t position: absolute;
\t background: #FFFFFF;
\t border: solid 1px #cccccc;
\t font-size: 0.875rem;
\t height: auto;
\t max-height: none;
\t width: 100%;
\t z-index: 89;
\t margin-top: 2px;
\t max-width: 200px;
}
.f-dropdown1.open {
\t display: block;
}
.f-dropdown1>*:first-child {
\t margin-top: 0;
}
.f-dropdown1>*:last-child {
\t margin-bottom: 0;
}
.f-dropdown1:before {
\t border: inset 6px;
\t content: "";
\t display: block;
\t height: 0;
\t width: 0;
\t border-color: transparent transparent #FFFFFF transparent;
\t border-bottom-style: solid;
\t position: absolute;
\t top: -12px;
\t left: 10px;
\t z-index: 89;
}
.f-dropdown1:after {
\t border: inset 7px;
\t content: "";
\t display: block;
\t height: 0;
\t width: 0;
\t border-color: transparent transparent #cccccc transparent;
\t border-bottom-style: solid;
\t position: absolute;
\t top: -14px;
\t left: 9px;
\t z-index: 88;
}
.f-dropdown1.right:before {
\t left: auto;
\t right: 10px;
}
.f-dropdown1.right:after {
\t left: auto;
\t right: 9px;
}
.f-dropdown1.drop-right {
\t display: none;
\t left: -9999px;
\t list-style: none;
\t margin-left: 0;
\t /* position: absolute;
*/
\t background: #FFFFFF;
\t border: solid 1px #cccccc;
\t font-size: 0.875rem;
\t height: auto;
\t max-height: none;
\t width: 100%;
\t z-index: 89;
\t margin-top: 0;
\t margin-left: 65px;
\t max-width: 200px;
}
.f-dropdown1.drop-right.open {
\t display: block;
}
.f-dropdown1.drop-right>*:first-child {
\t margin-top: 0;
}
.f-dropdown1.drop-right>*:last-child {
\t margin-bottom: 0;
}
.f-dropdown1.drop-right:before {
\t border: inset 6px;
\t content: "";
\t display: block;
\t height: 0;
\t width: 0;
\t border-color: transparent #FFFFFF transparent transparent;
\t border-right-style: solid;
\t position: absolute;
\t top: 10px;
\t left: -12px;
\t z-index: 89;
}
.f-dropdown1.drop-right:after {
\t border: inset 7px;
\t content: "";
\t display: block;
\t height: 0;
\t width: 0;
\t border-color: transparent #cccccc transparent transparent;
\t border-right-style: solid;
\t position: absolute;
\t top: 9px;
\t left: -14px;
\t z-index: 88;
}
.f-dropdown1 ul:active {
\t border: 1px solid red !important;
}
.f-dropdown1 li {
\t cursor: pointer;
\t font-size: 0.875rem;
\t line-height: 1.125rem;
\t margin: 0;
}
.f-dropdown1 li:hover, .f-dropdown li:focus {
\t background: #EEEEEE;
\t border: none;
}
.f-dropdown1 li a {
\t display: block;
\t padding: 0.5rem;
\t color: #555555;
}
.f-dropdown1.content {
\t display: none;
\t left: -9999px;
\t list-style: none;
\t margin-left: 0;
\t position: absolute;
\t background: #FFFFFF;
\t border: solid 1px #cccccc;
\t font-size: 0.875rem;
\t height: auto;
\t max-height: none;
\t padding: 1.25rem;
\t width: 100%;
\t z-index: 89;
\t max-width: 200px;
}
.f-dropdown1.content.open {
\t display: block;
}
.f-dropdown1.content>*:first-child {
\t margin-top: 0;
}
.f-dropdown1.content>*:last-child {
\t margin-bottom: 0;
}
.f-dropdown1.radius {
\t border-radius: 3px;
}
.f-dropdown1.tiny {
\t max-width: 200px;
}
.f-dropdown1.small {
\t max-width: 300px;
}
.f-dropdown1.medium {
\t max-width: 500px;
}
.f-dropdown1.large {
\t max-width: 800px;
}
.f-dropdown1.mega {
\t width: 100% !important;
\t max-width: 100% !important;
}
.f-dropdown1.mega.open {
\t left: 0 !important;
}
.dropdown.button, button.dropdown {
\t position: relative;
\t padding-right: 3.5625rem;
}
.dropdown.button::after, button.dropdown::after {
\t border-color: #FFFFFF transparent transparent transparent;
\t border-style: solid;
\t content: "";
\t display: block;
\t height: 0;
\t position: absolute;
\t top: 50%;
\t width: 0;
}
.dropdown.button::after, button.dropdown::after {
\t border-width: 0.375rem;
\t right: 1.40625rem;
\t margin-top: -0.15625rem;
}
.dropdown.button::after, button.dropdown::after {
\t border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.tiny, button.dropdown.tiny {
\t padding-right: 2.625rem;
}
.dropdown.button.tiny:after, button.dropdown.tiny:after {
\t border-width: 0.375rem;
\t right: 1.125rem;
\t margin-top: -0.125rem;
}
.dropdown.button.tiny::after, button.dropdown.tiny::after {
\t border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.small, button.dropdown.small {
\t padding-right: 3.0625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
\t border-width: 0.4375rem;
\t right: 1.3125rem;
\t margin-top: -0.15625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
\t border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.large, button.dropdown.large {
\t padding-right: 3.625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
\t border-width: 0.3125rem;
\t right: 1.71875rem;
\t margin-top: -0.15625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
\t border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.secondary:after, button.dropdown.secondary:after {
\t border-color: #333333 transparent transparent transparent;
}<a data-options="align:right" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" href="#" class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
<ul id="drop1" class="f-dropdown1" data-dropdown-content aria-hidden="true" tabindex="-1">
\t \t \t \t <li><a href="#">This is a link</a></li>
\t \t \t \t <li><a href="#">This is another</a></li>
\t \t \t \t <li><a href="#">Yet another</a></li>
\t \t \t </ul>
\t \t \t