html - 单击主导航元素时出现透明的蓝色

Question

我发现在点击导航栏的主菜单时有一个奇怪的行为 我完成导航的方式是在单击主菜单项时显示子菜单。我使用 HTML 和纯 CSS 完成了它。

长期以来，我一直致力于消除这种突出显示效果。最后，我找到了一个解决方案，方法是从 span 中删除选项卡索引，这导致没有出现边框，但下拉菜单也没有出现。

这是我的代码。有人可以帮我解决吗？

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

如果您指的是 Latest Posts 周围的虚线轮廓，可以用

删除

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

JSFiddle