html - 带方向箭头的纯 CSS 菜单-6ren

html - 带方向箭头的纯 CSS 菜单

转载作者：行者123 更新时间：2023-11-28 07:25:28

我正在尝试创建一个具有 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/H-V-A.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>

问题是当我尝试使子菜单箭头向右浮动时，格式变得一团糟。否则它们会显示在文本旁边，这是我不想要的。我希望它显示在最右边，在街区的边缘。

任何帮助将不胜感激!谢谢。 :)

最佳答案

如果您删除 float:right 并使用 position:absolute 并使您的 anchor 标记为 position:relative.

喜欢

.menu li > a:after { content: ' \25B7';
                     position: absolute; 
                     right:0px; 
                     top:14px;
                    }

然后你就可以实现你想要的。此外，还额外增加了 anchors 的 padding 以获得更好的箭头定位。

关于html - 带方向箭头的纯 CSS 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31846591/

文章推荐： jquery - 如何在选择下拉列表中隐藏所选选项

文章推荐： php - 离线使用没有 API 的 Google 字体

文章推荐： html - 如何在网站中添加加载效果？

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 带方向箭头的纯 CSS 菜单