Want to consult bosses, about this type of navigation have any code to share, and then explain, let me learning how to learn, thank you for your bosses
CodePudding user response:
Default hidden div mouse-over display, use the position to do
CodePudding user response:
reference 1st floor jio can reply: default hidden div mouse-over shows that using the position do locate CodePudding user response:
The display screen space occupied not CodePudding user response:
Js: v - show v - if CodePudding user response:
quoted li pond reply: 3/f display screen space occupied not CodePudding user response:
The reference 4 floor wzh970514 reply: js: v - show v - if I wrote a day, don't know how to separate the "ask" with the following list, also don't know how to set up the mouse in good q on display, js is learning, CSS don't come out to write a simple code trouble bosses make me familiar with the can CodePudding user response:
<meta charset="utf-8" & gt; Mouse-over menu appears secondary & lt;/title & gt; <br/><style> <br/>A {<br/>color: #fff; <br/>text-decoration: none; <br/>} <br/>Ul {<br/>margin: 0; <br/>list-style: none; <br/>} <br/># menu {<br/>Width: 500 px; <br/>Height: 60 px; <br/>Background: slategray; <br/>border-radius: 6px; <br/>Box - shadow: 2 p 2 p 5 px snow; <br/>} <br/># menu li {<br/>float: left; <br/>Margin - top: 10 px; <br/>line-height: 22px; <br/>padding: 0; <br/>position: relative; <br/>} <br/># menu li a {<br/>Padding: 10 px 20 px; <br/>display: inline-block; <br/>} <br/># menu li. Lis {<br/>width: 300px; <br/>height: 40px; <br/>line-height: 40px; <br/>Border - the radius: 5 px; <br/>Background: lightblue; <br/>position: absolute; <br/>Top: 70 px; <br/>} <br/># menu li. Lis a {<br/>Padding: 0 px; <br/>Background: none; <br/>Opacity: 1; <br/>color: #fff; <br/>} <br/># menu li. Lis a: hover {<br/>text-decoration: underline; <br/>} <br/></style> <br/><script> <br/>Window. The onl oad=function () {<br/>Var oUl=document. GetElementById (" menu "); <br/>Var. ALi=oUl getElementsByTagName (" li "); <br/>Var aDiv=oUl. GetElementsByTagName (' div '); <br/>Var timer=null; <br/>For (var I=0; i <ALi. Length; I++) {<br/>Var oA=aLi [I] getElementsByTagName (' a ') [0]; <br/>OA. The index=I; <br/>clearTimeout(timer); <br/>OA. onm ouseover=function () {<br/>ADiv [this index]. Style. The display='block'; <br/>} <br/>OA. onm ouseout=function () {<br/>N=this. The index; <br/>The timer=setTimeout (function () {<br/>ADiv [n]. Style. The display='none'; <br/>}, 200); <br/>} <br/>ADiv [I] onm ouseover=function () {<br/>clearTimeout(timer); <br/>='block' this. Style. The display; <br/>} <br/>ADiv [I] onm ouseout=function () {<br/>This. Style. The display='none'; <br/>} <br/>} <br/>} <br/></script> <br/></head> <br/><body> <br/><Div> <br/><Ul id="menu" & gt; <br/><li> <br/><A href="javascript:;" & gt; Fruit & lt;/a> <br/><Div class="lis" style="display: none;"> <br/><A> Apple & lt;/a & gt; <br/><A> Watermelon & lt;/a> <br/><A> Banana & lt;/a> <br/></div> <br/></li> <br/><li> <br/><A href="javascript:;"> Vegetables & lt;/a> <br/><Div style="display: none;"> <br/><A> Green vegetables & lt;/a> <br/><A> Chinese cabbage & lt;/a> <br/><A> Tomato & lt;/a> <br/><A> Potatoes & lt;/a> <br/></div> <br/></li> <br/></ul> <br/></div> <br/></body> <br/></html> <br/><p class="article - content rp"> CodePudding user response: </p><fieldset> <legend> refer to 7th floor wzh970514 response: <legend> <blockquote> & lt; ! DOCTYPE html> <br/><br/><html> <br/><Head & gt; <br/><meta charset="utf-8" & gt; <br/><title> Mouse-over menu appears secondary & lt;/title & gt; <br/><style> <br/>A {<br/>color: #fff; <br/>text-decoration: none; <br/>} <br/>Ul {<br/>margin: 0; <br/>list-style: none; <br/>} <br/># menu {<br/>Width: 500 px; <br/>Height: 60 px; <br/>Background: slategray; <br/>border-radius: 6px; <br/>Box - shadow: 2 p 2 p 5 px snow; <br/>} <br/># menu li {<br/>float: left; <br/>Margin - top: 10 px; <br/>line-height: 22px; <br/>padding: 0; <br/>position: relative; <br/>} <br/># menu li a {<br/>Padding: 10 px 20 px; <br/>display: inline-block; <br/>} <br/># menu li. Lis {<br/>width: 300px; <br/>height: 40px; <br/>line-height: 40px; <br/>Border - the radius: 5 px; <br/>Background: lightblue; <br/>position: absolute; <br/>Top: 70 px; <br/>} <br/># menu li. Lis a {<br/>Padding: 0 px; <br/>Background: none; <br/>Opacity: 1; <br/>color: #fff; <br/>} <br/># menu li. Lis a: hover {<br/>nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/88386.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/88386.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/88385.html'>Send a question to the BBS</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/88387.html'>The front-end issue of partial page data click the refresh button</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=HTML+%28CSS%29' target='_blank'>HTML (CSS)</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html> 
