html - 如何将这个水平菜单变成垂直菜单，使菜单在右边，子菜单在左边？-6ren

html - 如何将这个水平菜单变成垂直菜单，使菜单在右边，子菜单在左边？

转载作者：行者123 更新时间：2023-11-28 01:38:10

要在 CSS 文件中更改什么？我希望有人能帮助我。

/*Set the parent <li>â€™s CSS position property to â€˜relativeâ€™.*/

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #1bc2a2;
}
ul li {
	display: block;
	position: relative;
	float: left;
	background: #1bc2a2;
}

/*The CSS to hide the sub menus.*/
li ul {
	display:none;
}
ul li a {
	display: block;
	padding: 1em;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
}
ul li a:hover {
	background: #2c3e50;
}

/*Displays the dropdown menu on hover.*/
li:hover > ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
}
li:hover a {
	background: #1bc2a2;
}
li:hover li a:hover {
	background: #2c3e50;
}
.main.navigation li ul li {
	border-top: 0;
}

/*Displays second level dropdown menus to the right of the first level dropdown menu.

*/
ul ul ul {
	left: 100%;
	top: 0;
}

<!DOCTYPE html>
<html lang="hu-hu">
	<head>
		<meta charset="UTF-8">
		<title>cigand.menu.nested.list</title>
		<link rel="stylesheet"
			  type="text/css"
		        href="cigand.hu.menu.1.css" />
			  
	</head>
	<body>
		<div id="main-navigation">
		<ul>
			<li><a>Városunk</a>
				<ul>
					<li><a>Köszöntő</a></li>
					<li><a>Földrajz</a></li>
					<li><a>Története</a></li>
					<li><a>Heraldika</a></li>
				</ul>
			</li>
			<li><a>Önkormányzat</a>
				<ul>
					<li><a>Polgármesteri Hivatal</a>
						<ul>
							<li><a>Polgármester</a></li>
							<li><a>Alpolgármester</a></li>
							<li><a>Jegyző</a></li>
							<li><a>Titkárság</a></li>
							<li><a>Hatósági és Igazgatási Osztály</a></li>
							<li><a>Építésügyi és Városfejlesztési Osztály</a></li>
							<li><a>Pénzügyi Osztály</a></li>
							<li><a>Letölthető dokumentumok</a></li>
							<li><a>Pályázatok</a>
								<ul>
									<li><a>EU</a></li>
									<li><a>ÁROP</a></li>
									<li><a>TIOP-1.2.3</a></li>
									<li><a>KEOP-6.1.0/A/11.</a></li>
									<li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
									<li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
									<li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
									<li><a>EOP-5.5.0/K/14-2014-0031</a></li>
									<li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
									<li><a>KEOP-5.7.0/15-2015-0275</a></li>
									<li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a>Képviselő-testület</a>
						<ul>
							<li><a>Képviselők</a></li>
							<li><a>Határozatok, Rendeletek</a></li>
							<li><a>Rendelet-tervezetek</a></li>
							<li><a>estületi ülések</a></li>
						</ul>
					</li>
					<li><a>RNÖ</a></li>
					<li><a>Telefonszámok</a></li>
				</ul>
			</li>
			<li><a>Oktatás és Kultúra</a>
				<ul>
					<li><a>Oktatás</a>
						<ul>
							<li><a>Cigánd</a>
								<ul>
									<li><a>Óvoda</a></li>
									<li><a>Iskola</a></li>
								</ul>
							</li>
							<li><a>Révleányvár</a></li>
							<li><a>Zemplénagárd</a></li>
						</ul>
					</li>
					<li><a>Kultúra</a>
						<ul>
							<li><a>Művelődési Ház</a></li>
							<li><a>Városi Könyvtár</a></li>
							<li><a>Múzeumporta</a></li>
						</ul>
					</li>
					<li><a>Iskolakonyha</a></li>
				</ul>
			</li>
			<li><a>Egészségügy</a>
				<ul>
					<li><a>Háziorvosok</a></li>
					<li><a>Fogorvos</a></li>
					<li><a>Központi Orvosi Ügyelet</a></li>
					<li><a>Védőnői Szolgálat</a></li>
					<li><a>Járóbeteg Szakrendelő</a></li>
				</ul>
			</li>
			<li><a>Hagyományok</a>
				<ul>
					<li><a>Múzeumporta</a></li>
					<li><a>Tájház</a></li>
					<li><a>Óvodamúzeum</a></li>
				</ul>
			</li>
			<li><a>Sport</a>
				<ul>
					<li><a>Intézmények</a>
						<ul>
							<li><a>Szabadidő Központ</a></li>
							<li><a>Műfüves-pálya</a></li>
							<li><a>Labdarúgó-pálya</a></li>
						</ul>
					</li>
					<li><a>Cigánd SE</a></li>
				</ul>
			</li>
			<li><a>Kezdőlap</a>
			</li>
		</ul>
		</div>
	</body> What to change?
</html>
Please read the text what I wrote! So the menu is going to the right side of the page and the sub-menus need open in its left side. How modify the code to get vertical menu system?

因此菜单将转到页面的右侧，子菜单需要在其左侧打开。

最佳答案

试试这个可能对你有帮助

    ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #1bc2a2;
    width: 260px;
    float:right;
}
    ul li {
    	display: block;
    	position: relative;
    	display: block;
    	background: #1bc2a2;
    }

    /*The CSS to hide the sub menus.*/
    li ul {
    	display:none;
    }
    ul li a {
    	display: block;
    	padding: 1em;
    	text-decoration: none;
    	white-space: nowrap;
    	color: #fff;
    }
    ul li a:hover {
    	background: #2c3e50;
    }

    /*Displays the dropdown menu on hover.*/
    li:hover > ul {
	display: block;
	position: absolute;
    top: 0px;
    right: 260px;
}
    li:hover li {
    	float: none;
    }
    li:hover a {
    	background: #1bc2a2;
    }
    li:hover li a:hover {
    	background: #2c3e50;
    }
    .main.navigation li ul li {
    	border-top: 0;
    }

    /*Displays second level dropdown menus to the right of the first level dropdown menu.

    */
    ul ul ul {
    	left: 100%;
    	top: 0;
    }

		<div id="main-navigation">
    		<ul>
    			<li><a>Városunk</a>
    				<ul>
    					<li><a>Köszöntő</a></li>
    					<li><a>Földrajz</a></li>
    					<li><a>Története</a></li>
    					<li><a>Heraldika</a></li>
    				</ul>
    			</li>
    			<li><a>Önkormányzat</a>
    				<ul>
    					<li><a>Polgármesteri Hivatal</a>
    						<ul>
    							<li><a>Polgármester</a></li>
    							<li><a>Alpolgármester</a></li>
    							<li><a>Jegyző</a></li>
    							<li><a>Titkárság</a></li>
    							<li><a>Hatósági és Igazgatási Osztály</a></li>
    							<li><a>Építésügyi és Városfejlesztési Osztály</a></li>
    							<li><a>Pénzügyi Osztály</a></li>
    							<li><a>Letölthető dokumentumok</a></li>
    							<li><a>Pályázatok</a>
    								<ul>
    									<li><a>EU</a></li>
    									<li><a>ÁROP</a></li>
    									<li><a>TIOP-1.2.3</a></li>
    									<li><a>KEOP-6.1.0/A/11.</a></li>
    									<li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
    									<li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
    									<li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
    									<li><a>EOP-5.5.0/K/14-2014-0031</a></li>
    									<li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
    									<li><a>KEOP-5.7.0/15-2015-0275</a></li>
    									<li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
    								</ul>
    							</li>
    						</ul>
    					</li>
    					<li><a>Képviselő-testület</a>
    						<ul>
    							<li><a>Képviselők</a></li>
    							<li><a>Határozatok, Rendeletek</a></li>
    							<li><a>Rendelet-tervezetek</a></li>
    							<li><a>estületi ülések</a></li>
    						</ul>
    					</li>
    					<li><a>RNÖ</a></li>
    					<li><a>Telefonszámok</a></li>
    				</ul>
    			</li>
    			<li><a>Oktatás és Kultúra</a>
    				<ul>
    					<li><a>Oktatás</a>
    						<ul>
    							<li><a>Cigánd</a>
    								<ul>
    									<li><a>Óvoda</a></li>
    									<li><a>Iskola</a></li>
    								</ul>
    							</li>
    							<li><a>Révleányvár</a></li>
    							<li><a>Zemplénagárd</a></li>
    						</ul>
    					</li>
    					<li><a>Kultúra</a>
    						<ul>
    							<li><a>Művelődési Ház</a></li>
    							<li><a>Városi Könyvtár</a></li>
    							<li><a>Múzeumporta</a></li>
    						</ul>
    					</li>
    					<li><a>Iskolakonyha</a></li>
    				</ul>
    			</li>
    			<li><a>Egészségügy</a>
    				<ul>
    					<li><a>Háziorvosok</a></li>
    					<li><a>Fogorvos</a></li>
    					<li><a>Központi Orvosi Ügyelet</a></li>
    					<li><a>Védőnői Szolgálat</a></li>
    					<li><a>Járóbeteg Szakrendelő</a></li>
    				</ul>
    			</li>
    			<li><a>Hagyományok</a>
    				<ul>
    					<li><a>Múzeumporta</a></li>
    					<li><a>Tájház</a></li>
    					<li><a>Óvodamúzeum</a></li>
    				</ul>
    			</li>
    			<li><a>Sport</a>
    				<ul>
    					<li><a>Intézmények</a>
    						<ul>
    							<li><a>Szabadidő Központ</a></li>
    							<li><a>Műfüves-pálya</a></li>
    							<li><a>Labdarúgó-pálya</a></li>
    						</ul>
    					</li>
    					<li><a>Cigánd SE</a></li>
    				</ul>
    			</li>
    			<li><a>Kezdőlap</a>
    			</li>
    		</ul>
    		</div>

关于html - 如何将这个水平菜单变成垂直菜单，使菜单在右边，子菜单在左边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50564204/

文章推荐： c++ - OpenMP 与 boost::directory_iterator 并行

文章推荐： c++ - ((Thermostat*)this)->Thermostat::_dht' 没有类类型

文章推荐： c++ - 为什么new和malloc输出的结果不一样？

文章推荐： javascript - 使用 Highcharts 深入钻取 1 个以上的子报表

jQuery 子>父>子
我有这个 html 代码: HELLO WORLD! X V HELLO WORLD! X V 我想按 X(类关闭)将父 div 的高度更改为 20px 并显示 V(类打开)，但在每个 d
database-design - 在数据库中存储(子)日志和(子)分类帐以用于会计应用程序
在会计应用程序的许多不同实现中，有两种主要的数据库设计方法来保存日志和分类帐数据。只保留 Journal 信息，然后 Ledger 只是 Journal 的一个 View (因为 journal 总
子里面的 Perl 子
我想在另一个子里面有一个子， sub a { sub b { } } 我想为每次调用 sub b 创建一个新的 sub a 实例。有没有办法在 Perl 中做到这一点？当我运行上面的
excel - 查找重复项和重命名主/子
我有一些代码正在查找重复项并突出显示单元格: Private Sub cmdDups_Click() Dim Rng As Range Dim cel As Range Set Rng = ThisW
delphi - 子表中具有替代链接字段的主/子
可能有一个简单的解决方案，但我很难过。我有一个包含一个 ID 字段的主表。在两个可能的字段中有一个具有该 ID 的子表。想象一个由选手 A 和选手 B 组成的 double 队。Master 表将有
javascript - 将相关元素嵌套在一起父/子
假设我有一个包含对象的数组: [ { "id": "5a97e047f826a0111b754beb", "name": "Hogwarts", "parentId": "
mysql - 同时批量插入父/子
我正在尝试对 MySQL 数据库表执行一对父/子模型的批量插入，但似乎无法使用标准的 ActiveRecord 功能来完成。所以，我尝试了 activerecord-import gem，但它也不支持
c# - 子/父事件引发
我有一个带有多个子类的父抽象类。最终，我希望通过 GUI 中的进度条显示子类中完成的进度。我目前所做的，我意识到这是行不通的，是在父类中声明为每个子类将覆盖的虚拟方法的事件方法定义。所以像: pub
Javascript(子)对象通过键数组访问
是否可以通过键数组在对象中设置变量？例如我有这个对象: var obj = {'outer': {'inner': 'value'} }; 并希望设置由键数组选择的值: var keys = ['ou
mysql - 具有多个级别的多重关系父/子
我有一个名为 companies 的 MySQL 表，如下所示: +---------+-----------+-----------+ | id_comp | comp_name | id_pare
linux - 子。命令在终端上不起作用
我正在尝试使用 sublime text 在 sublime text 上的 ionic 上打开我的第一个应用程序。它给了我一个“找不到命令”的错误。如何修复？我试过这些命令: sudo rm -r
Python 共享属性父/子
不好意思问，但我正在使用 webapp2，我正在设计一个解决方案，以便更容易定义路由 based on this google webapp2 route function .但这完全取决于能够在子级
c++ - 获取用数字字符串表示的树中的所有直接父/子
我有代表树的数字字符串(我不知道是否有官方名称): 012323301212 上面的例子代表了 2 棵树。根用 0 表示。根的直接子代为“1”，“1”的直接子代为“2”，依此类推。我需要将它们分组到由
Android ==> 子 Activity ？
是否可以在当前 Activity 之上添加 Activity 。例如，假设我单击一个按钮，然后它将第二个 Activity 添加到当前 Activity 。而第二个 Activity 只覆盖了我当前
REST 子/子资源单个实体
我很难思考如何为子资源建模。以作者的书籍为例。你可以有 N 本书，每本书只有一位作者。 /books GET /books POST /books/id PUT /books/id DELETE 到
Python:(子)字符串等价与列表快速成员资格测试
有人可以向我解释以下内容(python 2.7) 来自已解析文件的两个字符串数字: '410.9''410.9 '(注意尾随空格) A_LIST = ['410.9 '] '410.9' in '41
.net - 是否存在指定的(子)索引分隔符？
背景在 PowerShell 中构建 hash table 是很常见的通过特定属性快速访问对象，例如以 LastName 为基础建立索引: $List = ConvertFrom-Csv @' I
polymer - 子 Web 组件的调用方法
我真的很难弄清楚如何调用嵌套 Polymer Web 组件的函数。这是标记: rise-distribution组件有 canPlay我想从 rise-playlist
graphviz - 具有大(子)集群的图形的隐点错误消息
我写了一个小工具转储(以 dot 格式)一个项目的依赖关系图，其中所有位于同一目录中的文件都聚集在一个集群中。当我尝试生成包含相应图形的 pdf 时，dot开始哭: 命令 dot -Tpdf trim
perl - 如何通过指定其解析树来创建 perl 子？
给定一个 CODE ref，是否可以: 访问该 CODE ref 的解析树通过指定 CODE ref 的解析树来创建一个新的 CODE ref，该解析树可以包含在 1 中返回的解析树的元素通常我们

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何将这个水平菜单变成垂直菜单，使菜单在右边，子菜单在左边？