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