我已经从CSS和HTML中制作了一个CSS下拉菜单.我的问题是,当我将鼠标悬停在导航栏上时,页面内容会移到右侧.然后,当我将鼠标悬停在下拉菜单上时,页面内容将移回到左侧.到目前为止,我还没有发现任何可以帮助我的东西.我已在下面附上了相关代码.
请帮助我,谢谢
* { padding: 0; margin: 0;}nav { background-color: #cccccc; wIDth: 100%; height: 80px;}ul { float: left;}ul li { position: relative; List-style: none; float: left; line-height: 80px; Font-size: 20px; color: #c92d39;}ul li a{ display: block; text-decoration: none; color: #c92d39; padding: 0 30px;}ul li a:hover { color: black; border-bottom: 1px solID #c92d39;}ul li:hover ul { display: block;}ul li ul { display: none; position: absolute; background-color: #e5e5e5; border-radius: 0 0 3px 3px;}ul li ul li a:hover { background-color: #b2b2b2; color: #c92d39; border-bottom: none;}ul li ul li { Font-size: 15px; wIDth: 100%; text-align: center;}h1 { color: #c92d39; padding: 30px;}h2 { color: #c92d39; padding: 5px 30px 10px 30px;}p { padding: 0px 30px;}a { text-decoration: none;}#logo { background-color: #cccccc; padding: 0 51px 0 75px; Font-size: 30px; Font-weight: bold;}.page-body { background-color: #e5e5e5;}.wrapper { margin: 0 300px 0 300px; padding-left: 0px; height: 100%; background-color: white;}.footer { background-color: #cccccc; wIDth: 100%; height: 80px;}.empty_Box { height: 1000px; wIDth: 100%;}#contacts { margin: 0px 0px 0px 60px; padding: 0 20px; border-top: 1px solID #cccccc;}#contacts:hover { border-top: 1px solID #c92d39;}#copyright { Font-size: 10px; float: right; padding: 0px 30px 0 770px;}#copyright:hover { background-color: #cccccc;}<!DOCTYPE HTML><HTML> <head> <Meta charset="utf-8"> <Title>Basecode</Title> <link href="style.CSS" rel="stylesheet" type="text/CSS"> </head> <body> <nav> <ul> <li ID="logo">Cultural Asia</li> </ul> <ul> <li><a href="index.HTML">Home</a></li> <li> <a href="attractions.HTML">Attractions</a> <ul> <li><a href="#">attraction1</a></li> <li><a href="#">attraction2</a></li> <li><a href="#">attraction3</a></li> </ul> </li> <li> <a href="packages.HTML">Packages</a> <ul> <li><a href="#">package1</a></li> <li><a href="#">package2</a></li> <li><a href="#">package3</a></li> </ul> </li> <li><a href="contacts.HTML">Contacts</a></li> </ul> </nav> <div > <div > <p>hi</p> <div ></div> </div> </div> <div > <ul> <li><a href="contacts.HTML" ID="contacts">Contact Details</a></li> <li ID="copyright">copyright Lachlan Dunn</li> </ul> </div> </body></HTML>.page-body { … clear: left;}演示版
* { padding: 0; margin: 0;}nav { background-color: #cccccc; wIDth: 100%; height: 80px;}ul { float: left;}ul li { position: relative; List-style: none; float: left; line-height: 80px; Font-size: 20px; color: #c92d39;}ul li a { display: block; text-decoration: none; color: #c92d39; padding: 0 30px;}ul li a:hover { color: black; border-bottom: 1px solID #c92d39;}ul li:hover ul { display: block;}ul li ul { display: none; position: absolute; background-color: #e5e5e5; border-radius: 0 0 3px 3px;}ul li ul li a:hover { background-color: #b2b2b2; color: #c92d39; border-bottom: none;}ul li ul li { Font-size: 15px; wIDth: 100%; text-align: center;}h1 { color: #c92d39; padding: 30px;}h2 { color: #c92d39; padding: 5px 30px 10px 30px;}p { padding: 0px 30px;}a { text-decoration: none;}#logo { background-color: #cccccc; padding: 0 51px 0 75px; Font-size: 30px; Font-weight: bold;}.page-body { background-color: #e5e5e5; clear: left;}.wrapper { margin: 0 300px 0 300px; padding-left: 0px; height: 100%; background-color: white;}.footer { background-color: #cccccc; wIDth: 100%; height: 80px;}.empty_Box { height: 1000px; wIDth: 100%;}#contacts { margin: 0px 0px 0px 60px; padding: 0 20px; border-top: 1px solID #cccccc;}#contacts:hover { border-top: 1px solID #c92d39;}#copyright { Font-size: 10px; float: right; padding: 0px 30px 0 770px;}#copyright:hover { background-color: #cccccc;}<nav> <ul> <li ID="logo">Cultural Asia</li> </ul> <ul> <li><a href="index.HTML">Home</a></li> <li> <a href="attractions.HTML">Attractions</a> <ul> <li><a href="#">attraction1</a></li> <li><a href="#">attraction2</a></li> <li><a href="#">attraction3</a></li> </ul> </li> <li> <a href="packages.HTML">Packages</a> <ul> <li><a href="#">package1</a></li> <li><a href="#">package2</a></li> <li><a href="#">package3</a></li> </ul> </li> <li><a href="contacts.HTML">Contacts</a></li> </ul></nav><div > <div > <p>hi</p> <div ></div> </div></div><div > <ul> <li><a href="contacts.HTML" ID="contacts">Contact Details</a></li> <li ID="copyright">copyright Lachlan Dunn</li> </ul></div>以上是内存溢出为你收集整理的html-CSS下拉菜单移动页面内容 全部内容，希望文章能够帮你解决html-CSS下拉菜单移动页面内容 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）