從一個鏈接，一旦點擊CSS焦點移出下拉菜單

Question

我有一個CSS下拉（下同）菜單，但是，我的問題是這樣的，一旦下拉菜單選項（鏈接）被點擊，討厭即。 7留下一個unwated矩形細虛線顯示的菜單選項，點擊後不久焦點。如何刪除鏈接的焦點已被點擊之後呢？

<div id="menu" style="width: 1001px; height: 20px"> 
    <ul> 
    <li><a href="#nogo"><div id="file">File</div></a> 
    <ul> 
    <li><a href="#nogo" onclick="window.print()"><div id="print">Print</div></a></li> 
    <li><a href="#nogo" onclick="sims_update()"><div id="save">Save</div></a></li> 
    <li><a href="#nogo" onclick="sims_update('s');window.close()"><div id="saveandexit">Save & Exit</div></a></li> 
    <li><a href="#nogo" onclick="window.close()"><div id="exit">Exit</div></a></li> 
    </ul> 
    </li> 
    <li><a href="#nogo"><div id="edit">Edit</div></a> 
    <ul> 
    <li><a href="#nogo" onclick="sims_addnew();return false"><div id="addnew">Add new</div></a></li> 
    <li><a href="#nogo"><div id="delete">Delete</div></a></li> 
    <li><a href="#nogo" onclick="sims_reset()"><div id="clear">Clear Form</div></a></li> 
    </ul> 
    </li> 
    <li><a href="#nogo"><div id="view">View</div></a> 
    <ul> 
    <li><a href="#nogo"><div id="goto_first">&gt;&gt; Go to First</div></a></li> 
    <li><a href="#nogo"><div id="goto_next">&gt;Go to Next</div></a></li> 
    <li><a href="#nogo"><div id="goto_prev">Go to Previous&gt;</div></a></li> 
    <li><a href="#nogo"><div id="goto_last">Go to Last&gt;&gt;</div></a></li> 
    </ul> 
    </li> 

    <li><a href="#nogo"><div id="reports">Reports</div></a> 
    <ul> 
    <li><a href="#nogo"><div id="export_excel">Export to Excel Table</div></a></li> 
    <li><a href="#nogo"><div id="export_html">Export to HTML Table</div></a></li> 
    <li><a href="#nogo" onclick="sims_compile_htmllist()"><div id="export_list">Export to HTML List</div></a></li> 
    </ul> 
    </li> 

    <li><a href="#nogo"><div id="logoff">Logoff</div></a></li> 

    </ul> 
    <ul> 
    </div> 

</div> 

的CSS：

/*HORIZONTAL DROP-DOWN MENU */ 
#menuwrapper{ 
    position: fixed; 
    top: 30px; 
    left: 0px; 

    background-color: #A9BBD3; 
    height: 19px; 
    color: #FFFFFF; 
    font-size: 8pt; 
    padding-top: 1px; 
    padding-left: 3px; 
    border-top: 1px solid #FFF; 
    width: 100%; 

} 


#menu{ 
    padding:0; 
    margin:0; 
    position: fixed; 
    top: 31px; 
    left: 0px; 
    font-size: 8pt; 
    width: 1001px; 
} 
#menu ul{ 
    padding:0; 
    margin:0; 
} 
#menu li{ 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding:0; 
    float: left; 
    display:inline; 

} 

#menu li a{ 
    width:125px; 
    height: 20px; 
    display: block; 
    text-decoration:none; 
    line-height: 20px; 
    background-color: #A9BBD3; 
    color: #FFF; 
} 

#menu li a:hover{ 
    background-color: #446087; 
} 
#menu ul ul { 
    position: absolute; 
    top: 21px; 
    visibility: hidden; 
} 

#menu ul ul li a { 
    width: 120px; 
    padding-left: 5px; 
    filter:alpha(opacity=85); 
} 
#menu ul li:hover ul{ 
    visibility:visible; 
} 
#menu > ul > li > a { 
    text-align:center; 
} 
#menu > ul > li > a:hover { 
    border-bottom: 1px solid #FFF; 
} 

Answer 1

您需要在CSS喜歡用outline:none，

a:hover, a:active, a:focus { 
    outline: none; 
    border: 0; 
} 

更好，你需要添加的這段代碼在你的reset.css如果您有..

點擊向下的輸入類型=圖像可產生虛線輪廓（這是在Firefox 3.6.8而不是Firefox 4）。將其刪除：

input::-moz-focus-inner { border: 0; } 

希望，它可以幫助..

Answer 2

同樣的問題已經在這裏找到答案： How to remove dotted border around active hyperlinks in IE8 with CSS

看筆記的IE瀏覽器。