I don't know much about CSS. I used block hiding when making the vertical CSS menu, but not the horizontal menu. I'm very confused. Can someone please give me an answer_html/css_WEB-ITnose

先把纵向菜单的导航代码发出来
--------------------------------------------------------
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
69ead60f4f5bd2999ab42bf5dc6cf1d1
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
ef9cd36823c0f633bcf49bb63c0aa8b9
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6
f1b3ba8846c179e65eb68da95b01a812中国5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812唐朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812宋朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812汉朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812元朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812明朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812清朝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812俄罗斯5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812彼得大帝5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812沙皇5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812叶卡捷莉娜二世5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812马来西亚5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812美国5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812印度5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812日本5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812泰国5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812法国5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
----------------------纵向菜单导航的样式表如下--------------------------------
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
font-family: "新宋体";
font-size: 12px;
line-height: 1.5;
}
#menu {
width: 100px;
border: 1px solid #FFFF66;
}
#menu ul li {
line-height: 26px;
background-color: #CCCCCC;
height: 26px;
border: 1px solid #FF9900;
position: relative;
}
#menu ul li a {
color: #FF0000;
text-decoration: none;
width: 100px;
}
#menu ul li a:hover {
color: #00FF00;
width: 100px;
background-color: #0000FF;
}

#menu ul li:hover  {
background-color: #99FF66;
}
#menu ul li ul {
display: none;
border: 1px solid #FFFF99;
position: absolute;
width: 100px;
left: 100px;
top: 0px;
}
#menu ul li:hover ul {
display: block;
}
a:hover {
background-color: #3300FF;
}
---------------------------------------------------------------
可以看到标红的地方用了隐藏，也就是说不划过的话就不显示，那么这个可以理解
下面再来看看横向菜单的全部代码-----------------------------------------
2c1c01fe3da5b45638b932defb4b63fc
acf251eef30dadcd95fda0b63932cc24
93f0f5c25f18dab9d176bd4f6de5d30e
48e122a3b2cf97ce4b25f824efe9a0c3
b2386ffb911b14667cb8f0f91ea547a7菜单演示6e916e0f7d1e588d4f442bf645aedb2f
ef0d2420b1e5291570a81009eee48a1a
30fcda315ca48cb184475edbd98eba7d
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
5e8b12aba900d7e713dac8dfe58879bc
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79产品介绍5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79产品?5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79产品?5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79产品?5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79产品?5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
--------------------------------------------------You can see the horizontal menu style There is no part hidden in . The secondary menu is hidden when the page is opened. It is strange that the vertical menu defines ul as a block, while the horizontal menu defines a as a block. Could it be that a is defined as a block? Doesn't it need to be hidden if it is defined as a block? Moreover, when I tried to define the second-level ul as hidden in the horizontal menu, there was no response when the mouse moved over the first-level menu. In other words, the second-level menu was completely hidden. Does this mean that this hiding is inherited? Please ask relevant experts to answer, thank you

Reply to the discussion (solution)

There is indeed no hiding in landscape orientation, it’s just you It's just invisible

#nav li ul {line-height:27px; list-style-type:none; text-align:left; left:-999em; width:180px; position:absolute;}

Did you see left:-999em;? It is outside the page display area by default.

#nav li:hover ul {left:auto;}

When the mouse passes over, left is restored to the default position, so it appears.

Of course, it is recommended that you use hide, because in the current situation -999 is definitely outside the page, but if your ul itself is 999 away from the left, it will appear in the upper left corner of the page

Well, thank you, I really didn’t know what -999em meant