메인 탐색 요소를 클릭 할 때 푸른 색이 짙어집니다.

Question

탐색 모음의 주 메뉴를 클릭하면 이상한 동작이 나타납니다. 메인 메뉴 항목을 클릭하면 하위 메뉴가 표시되는 방식으로 탐색을 수행했습니다 . HTML 및 순수 CSS을 사용하여 완성했습니다.

나는 긴 시간 동안 강조 효과를 제거하기 위해 노력 해왔다. 마지막으로 경계선을 벗어나게하는 결과를 가져온 탭 색인을 제거하여 해결책을 찾았지만 드롭 다운도 나타나지 않습니다.

여기 내 코드입니다. 어느 누구도 해결책을 도울 수 있습니까? 당신이 Latest Posts 주위에 점선을 의미하는 경우

HTML

<div id="Latest_Posts"> 
    <div id="navs"> 
     <ul> 
      <li><span tabindex="1">Latest Posts</span> 

       <ul style="padding-top:.5em"> 
        <li id="none"></li> 
        <li><a href="<?php echo $a; ?>"><?php echo CHtml::image(Yii::app()->request->baseUrl.'/images/image1.png')." "; ?> This is the Latest Post No.1</a> 

        </li> 
        <li><a href="#Profile"><?php echo CHtml::image(Yii::app()->request->baseUrl.'/images/image2.png')." "; ?>This is the Latest Post No.2</a> 

        </li> 
        <li><a href="<?php echo $b; ?>"><?php echo CHtml::image(Yii::app()->request->baseUrl.'/images/image3.png')." "; ?>This is the Latest Post No.3</a> 

        </li> 
        <li><a href="#Profile"><?php echo CHtml::image(Yii::app()->request->baseUrl.'/images/image4.png')." "; ?>This is the Latest Post No.4</a> 

        </li> 
        <li id="none"></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS는

#navs { 
    z-index:4; 
} 
#navs ul { 
    height:24px; 
    width:80px; 
    list-style:none outside none; 
    position: relative; 
    float: left; 
    padding:1px; 
    margin-top:14px; 
} 
#navs ul ul { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #dfdfdf); 
    background-image: -moz-linear-gradient(top, #ffffff, #dfdfdf); 
    background-image: -ms-linear-gradient(top, #ffffff, #dfdfdf); 
    background-image: -o-linear-gradient(top, #ffffff, #dfdfdf); 
    background-image: linear-gradient(to bottom, #ffffff, #dfdfdf); 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#dfdfdf); 
    border:1px solid #b2b2b2; 
    display:none; 
    -webkit-box-shadow: 0 0 20px 1px #bfbfbf; 
    -moz-box-shadow: 0 0 20px 1px #bfbfbf; 
    box-shadow: 0 0 20px 1px #bfbfbf; 
    height:auto; 
    border-radius: .3em; 
    position:absolute; 
    top:24px; 
    width:320px; 
} 
#navs ul ul ul { 
    display:none; 
    left:168px; 
    position:absolute; 
    top:-1px; 
    width:138px; 
} 
#navs ul li { 
    float:left; 
    margin-right:1px; 
    width:100px; 
    position:relative; 
} 
/*style for the sub menus*/ 
#navs ul li a { 
    border:1px solid #000000; 
    color:#0065a4; 
    cursor:default; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:3px 3px 4px; 
    text-decoration:none; 
} 
#navs ul li span { 
    background:url(../images/blueArrow.png) no-repeat scroll 90% center transparent; 
    color:#ffffff; 
    cursor:pointer; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 14px 4px 3px; 
    position:relative; 
} 
/*division for latest posts hover color change*/ 
#navs ul li span:hover { 
    background:url(../images/blueArrow.png) no-repeat scroll 90% center transparent; 
    color:#beedfe; 
    cursor:pointer; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 14px 4px 3px; 
    position:relative; 
} 
/* division for contact Us*/ 
#navs ul li#special span { 
    background: no-repeat scroll 90% center transparent; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 14px 4px 3px; 
    position:relative; 
    width:60px; 
    margin-left:-10px; 
    color:#ffffff; 
} 
#navs ul li#special span:hover { 
    background: no-repeat scroll 90% center transparent; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 14px 4px 3px; 
    position:relative; 
    width:60px; 
    margin-left:-10px; 
    color:#beedfe; 
} 
/*style for main manu popular posts*/ 
#navs ul li#arrow_closer span { 
    background:url(../images/blueArrow.png) no-repeat scroll 90% center transparent; 
    color:#000; 
    cursor:pointer; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 20px 4px 3px; 
    position:relative; 
    margin-left: -11px; 
    color:#ffffff; 
} 
#navs ul li#arrow_closer span:hover { 
    background:url(../images/blueArrow.png) no-repeat scroll 90% center transparent; 
    color:#000; 
    cursor:pointer; 
    display:block; 
    font:13px Calibri, Arial, Helvetica, sans-serif; 
    padding:7px 20px 4px 3px; 
    position:relative; 
    margin-left: -11px; 
    color:#beedfe; 
} 
/*this for the top notch in the navigation drop down*/ 
#navs > ul > li > ul:before { 
    content:''; 
    display: block; 
    border-color: transparent transparent rgb(250, 250, 250) transparent; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -160px; 
} 
#navs ul ul li { 
    float:none; 
    margin-right:0; 
    cursor: pointer; 
    text-indent:10px; 
} 
#navs ul ul li a, #navs ul ul li span { 
    border:1px solid transparent; 
    padding:3px 3px 5px 2px; 
    width:314px; 
    text-decoration:none; 
} 
#navs ul ul li a img, #navs ul ul li span img { 
    border-width:0; 
    float:left; 
    margin-right:5px; 
    vertical-align:middle; 
    text-decoration: none; 
} 
#navs ul li:hover > a { 
    background-color: #36abf6; 
    border:1px solid #eee; 
    color:#000; 
    text-decoration: none; 
} 
#navs img.close { 
    display:none; 
    height:100%; 
    left:0; 
    position:fixed; 
    top:0; 
    z-index:-1; 
} 
#navs ul li span:focus + ul, #navs ul li ul:hover, #navs ul:hover + img.close { 
    display:block; 
} 

Answer 1

, 이것은

#navs ul li span:focus { 
    outline: 0; 
} 

제거 할 수 있습니다