具有方向箭头的纯CSS菜单
[英]Pure CSS Menu with Directional Arrows
问题描述
我正在尝试创建一个具有3个级别的菜单。 主菜单，某些项目的子菜单，然后是某些项目的第二子菜单。
我已经使菜单正常工作，但是我正在尝试使方向箭头正常工作，因此请在有子菜单时显示。
这是我的CSS和HTML：
h1 { font-family: "Arial"; font-size: 40px; } h2 { font-family: "Arial"; font-size: 30px; } h3 { font-family: "Arial"; font-size: 20px; } h4 { font-family: "Arial"; font-size: 16px; } ul { margin: 0; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } body { padding-top: 100px; } .header{ background-color: #1e82be; position: abolsute; width: 100%; top: 0px; left: 0px; } .headerlogo{ background-color: #1e82be; position: absolute; width: 100%; top: 0px; left: 0px; padding-left: .5cm; } .headermenu{ position: absolute; width: 100%; top: 0px; left: 0px; padding-top: 63px; } .menu li > a:after { content: ' \\25B7'; float: right; } .menu > li > a:after { content: ' \\25BD'; } .menu li > a:only-child:after { content: ''; } .menu li ul li { border-top: 0; } nav ul { list-style: none; padding: 0; margin: 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4298cb 0%, #1a70a4 100%) repeat scroll 0 0; } nav ul li { display: block; position: relative; float: left; background: background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4298cb 0%, #1a70a4 100%) repeat scroll 0 0; } nav li ul { display: none; } nav ul li a { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } nav ul li a:hover { background: #808080; } nav li:hover > ul { display: block; position: absolute; } nav li:hover li { float: none; } nav li:hover a { background: #A9A9A9; } nav li:hover li a:hover { background: #C0C0C0; } nav ul ul ul { left: 100%; top: 0; } nav ul:before, nav ul:after { content: " "; /* 1 */ display: table; /* 2 */ } nav ul:after { clear: both; }
<!DOCTYPE html> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/stylesheets/main.css"> <div class="header"> <div class="headerlogo"> <img src="/assets/images/main/logo.png"> </div> </div> <div class="headermenu"> <nav> <ul class="menu"> <li><a href="index.php">Home</a></li> <li><a href="#">Hyundai</a> <ul> <li id="H1"><a href="#">Links</i></a> <ul> <li><a href="http://www.hmca-autonet.com.au/Parts/default.aspx" target="_blank">Autonet</a></li> <li><a href="http://ccc.hyundai-motor.com/ccc/main.jsp" target="_blank">Hyundai Customer Care Centre</a></li> </ul> </li> <li id="H2"><a href="#">Vehicle ID & Info</a> <ul> <li><a href="../pages/HVA.php">Accent - MC Model</a></li> <li><a href="#">Elantra - HD Model</a></li> <li><a href="#">Granduer - TG Model</a></li> <li><a href="#">Santa Fe - CM Model</a></li> <li><a href="#">Sonata - NF Model</a></li> <li><a href="#">Tucson - JM Model</a></li> <li><a href="#">i10 - PA Model</a></li> <li><a href="#">i20 - PB Model</a></li> <li><a href="#">i30 - FB Model</a></li> <li><a href="#">ix35 - LM Models</a></li> <li><a href="#">iLoad / iMax - TQ Model</a></li> </ul> </li> <li><a href="assets/files/hyundai/Accessories_Pocket_Guide.pdf">Accessory Listing</a></li> <li><a href="#">Drive Belts</a></li> <li><a href="#">Belts by Size</a></li> <li><a href="#">Parts & Service Bulltetins</a></li> <li><a href="#">Trek n Tow Components</a></li> <li><a href="#">Hyundai PDI Sheets</a></li> </ul> </li> <li><a href="#">Isuzu Ute</i></a> <ul> <li><a href="#">Links</a> <ul> <li><a href="#">Isuzu Dealer Connect</a></li> <li><a href="#">IUA Extranet</a></li> </ul> </li> <li><a href="#">Accessory Listing</a></li> <li><a href="#">Parts & Service Bulletins</a></li> <li><a href="#">Isuzu PDI Sheets</a></li> </ul> </li> <li><a href="#">Nissan</a> <ul> <li><a href="#">Microfische to PDF Catalogue</a></li> <li><a href="#">Vehicle Bulletins</a> <ul> <li><a href="#">General</a></li> <li><a href="#">Dualis</a></li> <li><a href="#">Maxima</a></li> <li><a href="#">Micra</a></li> <li><a href="#">Murano</a></li> <li><a href="#">Pathfinder</a></li> <li><a href="#">Patrol</a></li> <li><a href="#">Tiida</a></li> <li><a href="#">X-Trail</a></li> <li><a href="#">350Z</a></li> <li><a href="#">370Z</a></li> </ul> </li> </ul> </li> <li><a>General</a> <ul> <li><a href="#">Bulb Reference Chart</a></li> <li><a href="#">Lubrication Guide</a> <ul> <li><a href="#">Great Wall</a></li> <li><a href="#">Hyundai</a></li> <li><a href="#">Isuzu</a></li> <li><a href="#">Nissan</a></li> <li><a href="#">Ssangyong</a></li> <li><a href="#">Suzuki</a></li> </ul> </li> <li><a href="#">Tyre Comparison Calculator</a></li> </ul> </li> </ul> </nav> </div>
问题是，当我尝试使子菜单箭头向右浮动时，格式就搞砸了。 否则，它们将显示在文本旁边，这是我不想要的。 我希望它显示在块边缘的最右边。
任何帮助，将不胜感激！ 谢谢。 :)
1 个解决方案
解决方案1
0 已采纳 2015-08-06 04:11:29
如果删除float:right并使用position:absolute并将anchor标记设为position:relative 。
喜欢
.menu li > a:after { content: ' \25B7';
position: absolute;
right:0px;
top:14px;
}
那么您就可以实现您想要的。 另外，还增加了anchors padding ，以实现更好的箭头定位。
带有“下一个”箭头的纯HTML / CSS列表菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.