NVDA 不使用箭头键读取导航中的文本

Question

I am facing an issue with the NVDA screen reader where it's not reading the links or text while navigating.

My CodePen

HTML

<nav role="navigation">
        <ul class="list">
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">Home</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in home</a>
                        </li>
                        <li>
                            <a href="">Second</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">About Us</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in about us</a>
                        </li>
                        <li>
                            <a href="">2nd</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in contact</a>
                        </li>
                        <li>
                            <a href="">two</a>
                        </li>
                    </ul>
                </div>
            </li>

        </ul>
</nav>

CSS

.sub-nav {
       display:none;
       background: greenyellow;
   }

   li.hover .sub-nav {
    display:block;
   }



   .list > li {
       float:left;
       margin: 0;
       background: grey;
       text-align: center;
   }
   ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
   }
   .list {
       margin:20px auto;
       padding: 0;
       list-style-type: none;
       width: 800px;
   }

   .sub-nav-list a {
       padding:20px 10px;
       margin-top:10px;
       display:inline-block;
       background: greenyellow;
   }

   .sub-nav-list a:first-child {
       margin-top: 0;
   }

   .list-item > a {
       display:block;
       padding: 20px;
       width: 200px;
       color: white;
   }

JS (using jQuery)

$(".list-item").mouseenter((e) => {
    $(e.currentTarget).addClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded',true)
})
$(".list-item").mouseleave((e) => {
    $(e.currentTarget).removeClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', false)
})

$(".list-item").focusin((e) => {
    $(e.currentTarget).addClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', true)
})

$(".list-item").focusout((e) => {
    if(e.currentTarget.contains(e.relatedTarget))
    {
        return
    }
    $(e.currentTarget).removeClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', false)
})

I am using arrow keys to navigate with NVDA, and if I move from a sub menu to the next menu, eg, going from "home" to its sub menu, moving next to the "About us" menu, it wont read "About us". Instead it reads the sub menu items of "About us" Any idea what could be going wrong?

What it reads:

navigation landmark 
list  with 3 items
collapsed  visited  subMenu  link
Home
list  with 2 items
visited  link
First list item in home
visited  link
Second
out of list
list  with 2 items
visited  link
First list item in about us

Answer 1

Sorry to be of little help, but works for me:

Home
collapsed  visited  subMenu  link
list  with 2 items
First list item in home
visited  link
Second
visited  link
About Us
expanded  visited  subMenu  link

I'm using NVDA 2019.2.1