ホバーしたとき、ボーダーの片側のみ表示が遅延する

前提・実現したいこと

CSS、HTMLともに素人です。
ページ上部に固定される横並びのアコーディオン（ホバーすると子要素が表示されるタイプのものです）メニューバーを作成したのですが、ホバーすると表示される子要素の右側のボーダーのみ、表示がわずかに遅延します。
どうすれば、遅延せずに表示できるのでしょうか。

発生している問題・エラーメッセージ

アコーディオンメニューでホバー時に表示される子要素の右側のボーダーのみ遅延して表示されてしまう。

該当のソースコード

かなりごちゃごちゃな記述になってしまっていると思います。
いろいろなサイトを参考にしながら、組み合わせ技で記述しています。

HTML
1    <header>
2    <h1>Site Name</h1>
3    <nav>
4        <ul>
5        <li><a href="about.html">ABOUT</a></li>
6        <li><a href="work.html">WORK</a>
7        <ul>
8            <li><a href="">ABC</a></li>
9            <li><a href="">DEF</a></li>
10            <li><a href="">GHI</a></li>
11        </ul>
12        </li>
13        <li><a href="blog.html">BLOG</a></li>
14        </ul>
15    </nav>
16    </header>

Javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script type="text/javascript">
3$(function() {
4    var nav = $('nav');    
5    var navTop = nav.offset().top;
6    $(window).scroll(function () {
7        var winTop = $(this).scrollTop();
8        if (winTop >= navTop) {
9            nav.addClass('fixed')
10        } else if (winTop <= navTop) {
11            nav.removeClass('fixed')
12        }
13    });
14    //subnavigation
15    $('li', nav).hover(function(){
16        $('ul',this).slideDown();
17    },
18    function(){
19        $('ul',this).slideUp();
20    });
21    var Speed= "200";
22});
23    </script>

CSS
1
2nav {
3    width: 100%;
4    text-align: center;
5    font-size: 0;
6    margin: auto;
7    padding: auto;
8    border-top: 1px #ddd solid;
9    border-bottom: 1px #ddd solid;
10    background: rgba(255, 255, 255, 0.85);
11}
12
13nav ul {
14    line-height: 0;
15}
16
17nav ul li {
18    width: 15%;
19    display: inline-block;
20    font-size: 16px;
21    border-right: 1px #ddd solid;
22}
23
24nav ul li:first-child {
25    border-left: 1px #ddd solid;
26}
27
28nav ul li > a {
29    display: block;
30    color: #444;
31    text-decoration: none;
32    font-family: 'Cormoran Garamond', serif;
33    line-height: 50px;
34}
35
36nav ul li > a:hover {
37    color: #ccc;
38    transition: 0.8s;
39}
40
41nav li ul {
42    display: none;
43    position: absolute;
44    width: inherit;
45    font-size: 16px;
46    margin-left: -1px;
47}
48
49nav li ul li {
50    border-bottom: 1px #ddd solid;
51    border-left: 1px #ddd solid;
52    border-right: 1px #ddd solid;
53    float: none;
54    width: 100%;
55    background-color: rgba(255, 255, 255, 0.85);
56}
57
58nav li ul li:first-child {
59    border-top: 1px #ddd solid;
60}
61
62nav li ul li > a {
63    color: #444;
64    display: block;
65}
66
67.fixed {
68    position: fixed;
69    top: 0;
70    width: 100%;
71    z-index: 10000
72}

試したこと

CSS > nav li ul li > borderの記述の方法を変える、位置をずらす。
→なにも変わりませんでした。

行動規範の内容に同意します

回答1件

以下のようにすることで質問者さんの実現したいことが行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8"><!-- 追記 -->
5    <title>無題ドキュメント</title>
6    <style>
7        nav {
8            width: 100%;
9            text-align: center;
10            font-size: 0;
11            margin: auto;
12            padding: auto;
13            border-top: 1px #ddd solid;
14            border-bottom: 1px #ddd solid;
15            background: rgba(255, 255, 255, 0.85);
16        }
17
18        nav ul {
19            line-height: 0;
20        }
21
22        nav ul li {
23            width: 15%;
24            display: inline-block;
25            font-size: 16px;
26            border-right: 1px #ddd solid;
27        }
28
29        nav ul li:first-child {
30            border-left: 1px #ddd solid;
31        }
32
33        nav ul li > a {
34            display: block;
35            color: #444;
36            text-decoration: none;
37            font-family: 'Cormoran Garamond', serif;
38            line-height: 50px;
39        }
40
41        nav ul li > a:hover {
42            color: #ccc;
43            transition: 0.8s;
44        }
45
46        nav li ul {
47            display: none;
48            position: absolute;
49            width: inherit;
50            font-size: 16px;
51            margin-left: -1px;
52        }
53
54        nav li ul li {
55            border-bottom: 1px #ddd solid;
56            border-left: 1px #ddd solid;
57            border-right: 1px #ddd solid;
58            float: none;
59            width: 100%;
60            background-color: rgba(255, 255, 255, 0.85);
61            box-sizing: border-box; /* 追記 */
62        }
63
64        nav li ul li:first-child {
65            border-top: 1px #ddd solid;
66        }
67
68        nav li ul li > a {
69            color: #444;
70            display: block;
71        }
72    </style>
73</head>
74<body>
75<header>
76    <h1>Site Name</h1>
77    <nav>
78        <ul>
79            <li><a href="about.html">ABOUT</a></li>
80            <li><a href="work.html">WORK</a>
81                <ul>
82                    <li><a href="">ABC</a></li>
83                    <li><a href="">DEF</a></li>
84                    <li><a href="">GHI</a></li>
85                </ul>
86            </li>
87            <li><a href="blog.html">BLOG</a></li>
88        </ul>
89    </nav>
90</header>
91<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
92<script type="text/javascript">
93    $(function () {
94        $('li').hover(
95            function () {
96                $('ul', this).slideDown();
97            },
98            function () {
99                $('ul', this).slideUp();
100            }
101        );
102    });
103</script>
104</body>
105</html>