html - 如何将此水平菜单变为垂直菜单,使菜单在右侧,子菜单在左侧?
问题描述
在 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>
推荐阅读
- web - 如何将我的移动应用程序链接到我的新网站?
- java - 如果我们在 Spring MVC 中组合类,我该如何设置 id?
- javascript - 数组列表按布尔值排序,然后按日期 JavaScript / TypeScript
- networking - 在浏览器或 wget 命令中访问 gitlab 服务器 url 时出现错误 ERR_EMPTY_RESPONSE
- javascript - 过滤来自登录请求的响应以删除标头和配置数据
- sql-server - 在 Visual Studio 的数据源中键入地址
- javascript - 重新运行 const 声明的函数的最佳方法是什么?
- wordpress - 无法为 Wordpress 设置联系表格 7 的样式
- r - R中表格值之间的3D插值
- react-native - 如何修复“RealmObject 不能作为函数调用”realm-js 错误?