feat(web.test5): 新增 web 实验5

Web/test4/index.html

@@ -12,7 +12,7 @@
     <ul class="main-menu">
         <li>
             <a href="#">菜单1</a>
-            <div></div>
+            <div class="sjx"></div>
             <ul class="sub-menu">
                 <li><a href="#">子菜单1-1</a></li>
                 <li><a href="#">子菜单1-2</a></li>
@@ -21,6 +21,7 @@
         </li>
         <li>
             <a href="#">菜单2</a>
+            <div class="sjx"></div>
             <ul class="sub-menu">
                 <li><a href="#">子菜单2-1</a></li>
                 <li><a href="#">子菜单2-2</a></li>
@@ -29,6 +30,7 @@
         </li>
         <li>
             <a href="#">菜单3</a>
+            <div class="sjx"></div>
             <ul class="sub-menu">
                 <li><a href="#">子菜单3-1</a></li>
                 <li><a href="#">子菜单3-2</a></li>

Web/test4/public/mainMenu.css

@@ -39,15 +39,18 @@ li:hover {
   background: #a93aca;
 }
 
-div {
-  border: 15px solid red;
+.sjx {
+  border: 8px solid red;
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
   display: inline-block;
+  justify-content: center;
   position: absolute;
-  right: 2px;
   opacity: 0;
+  right: 10%;
+  transform: translateY(50%);
+  transition: opacity 0.1s;
 }
 
 .main-menu li {