悬停导航栏 - CSS
[英]Navigation bar on hover - CSS
问题描述
我有这个代码，但它不起作用。 当我将鼠标悬停在主菜单上时，子菜单不显示。 颜色更改似乎有效，但第二个列表在悬停时未显示在主菜单下。 我找不到问题...请帮忙
<html> <head> <title>test</title> <style type="text/css"> #navigationbar { position: relative; padding: 0; margin: 0; height: 30px; width: 90%; } #navigationbar ul { position: absolute; margin: 0; padding: 0; height: 100%; width: 100%; list-style-type: none; background-color: #eeeeee; overflow: visible; } #navigationbar ul>li { display: block; float: left; height: auto; width: 130px; } #navigationbar li>a { display: block; height: 100%; padding: 0 0 0 10px; width: 115px; border-right: 1px black solid; font-size: 17px; font-family: sans-serif; background-color: #eeeeee; color: #5d5636; line-height: 30px; text-decoration: none; } #navigationbar ul ul { margin-top: 2px; display: none; width: 160px; height: auto; background-color: #dddddd; position: static; border: 1px #666666 solid; } #navigationbar ul ul li { position: relative; float: none; display: block; height: 28px; width: 100%; border: none; } #navigationbar ul ul li>a { height: 100%; width: 96%; padding: 0 0 0 4%; line-height: 28px; background-color: transparent; border: none; color: #000000; font-size 12px; font-style: normal; } #navigationbar li:hover > a { color: #220000; background-color: #eeeabe; } #navigationbar li:hover > ul { display: block; } </style> </head> <body> <h1>Nagłówek</h1> <nav id="navigationbar"> <ul> <li><a href="/home.html">Home</a></li> <li><a href="/AAAtest.html">A</a></li> <ul> <li><a href=/a.html>aaaaa</a></li> <li><a href=/b.html>bbbbb</a></li> <li><a href=/c.html>ccccc</a></li> </ul> <li><a href="/BBBtest.html">B</a></li> <ul> <li><a href=/aa.html>AAAA</a></li> <li><a href=/bb.html>BBBBB</a></li> <li><a href=/cc.html>CCCCC</a></li> </ul> </ul> </nav> </body> </html>谢谢。
1 个解决方案
解决方案1
1 已采纳 2017-01-19 19:50:06
你把li的结束标签放错了地方
<html> <head> <title>test</title> <style type="text/css"> #navigationbar { position: relative; padding: 0; margin: 0; height: 30px; width: 90%; } #navigationbar ul { position: absolute; margin: 0; padding: 0; height: 100%; width: 100%; list-style-type: none; background-color: #eeeeee; overflow: visible; } #navigationbar ul>li { display: block; float: left; height: auto; width: 130px; } #navigationbar li>a { display: block; height: 100%; padding: 0 0 0 10px; width: 115px; border-right: 1px black solid; font-size: 17px; font-family: sans-serif; background-color: #eeeeee; color: #5d5636; line-height: 30px; text-decoration: none; } #navigationbar ul ul { margin-top: 2px; display: none; width: 160px; height: auto; background-color: #dddddd; border: 1px #666666 solid; } #navigationbar ul ul li { position: relative; float: none; display: block; height: 28px; width: 100%; border: none; } #navigationbar ul ul li>a { height: 100%; width: 96%; padding: 0 0 0 4%; line-height: 28px; background-color: transparent; border: none; color: #000000; font-size 12px; font-style: normal; } #navigationbar li:hover > a { color: #220000; background-color: #eeeabe; } #navigationbar li:hover > ul { display: block; } </style> </head> <body> <h1>Nagłówek</h1> <nav id="navigationbar"> <ul> <li><a href="/home.html">Home</a> </li> <li><a href="/AAAtest.html">A</a> <ul> <li><a href=/a.html>aaaaa</a> </li> <li><a href=/b.html>bbbbb</a> </li> <li><a href=/c.html>ccccc</a> </li> </ul> </li> <li><a href="/BBBtest.html">B</a> <ul> <li><a href=/aa.html>AAAA</a> </li> <li><a href=/bb.html>BBBBB</a> </li> <li><a href=/cc.html>CCCCC</a> </li> </ul> </li> </ul> </nav> </body> </html>
WordPress / CSS-子菜单悬停下拉样式添加到导航栏
[英]Wordpress/CSS - Submenu hover dropdown styles added to navigation bar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.