Skip to Content
0
Former Member
Jan 02, 2009 at 03:49 PM

how to remove the dotted box in portal hover menu

51 Views

Hi all,

I have been successfully changed the portal TLN to hover menu according to Ameya Subhash Pimpalgaonkar's article. Now I am facing an annoying issue, that after selecting from the second level menu, a dotted box was lefted on content area.

I did a lot of research on "dotted box", it related to the focus attribute of the <a>. I put lines of code

    outline: none;
    user-focus: none; 
    -moz-user-focus: none; 
    -moz-outline: none; 

in the stylesheet in a block, a:visited block, a:focus block. Didn't solved my issue.

I thought if I can refresh TLN after the selecting, it will reset the focus to the logo image in masthead, it would be an acceptable walk-around. But I do not know how to do it in the lines of code here.

<%-- start the unordered list --%>
<ul>
    <%-- go through all the level 1 navigation nodes --%>
    <nav:iterateInitialNavNodes>
        <li class='Level1'><nav:navNodeAnchor navigationMethod="byURL" />
        <%-- check to see if there are level 2 nodes, if so start another <ul> and assign a CSS class --%>
        <nav:ifNavNodeHasChildren>
            <ul>
            <%-- again go through all the nodes in level 2 --%>
            <nav:iterateNavNodeChildren>
                <%-- id l1 is written for second level hover and to set its css properties --%>
                <li class='Level2' id='l1'><nav:navNodeAnchor navigationMethod="byURL" /></li>
            </nav:iterateNavNodeChildren>
            </ul>
        </nav:ifNavNodeHasChildren>
        </li>
    </nav:iterateInitialNavNodes>
</ul>

Expects, please help.Thanks in advance.