如何使此水平菜单变为垂直菜单，以使菜单位于右侧，子菜单位于左侧？
[英]How to make this horizontal menu to vertical menu, so that the menu would be on the right side and the sub-menus on its left side?
问题描述
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?
因此，菜单将转到页面的右侧，子菜单需要在其左侧打开。
2 个解决方案
解决方案1
0 2018-05-28 10:48:12
试试这个可能对您有帮助
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>
解决方案2
0 2018-05-28 11:09:22
浏览器的右侧并向左侧打开...尚未完全解决，但是尝试在现有的CSS中更改此设置...
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
float: right;
}
ul li {
display: block;
position: relative;
margin-left: -200px;
background: #1bc2a2;
}
li ul {
margin-top: -50px;
display:none;
}
...
ul ul ul {
margin-left: -120px;
top: 0;
}
您必须和ul ul ul一起玩（使用：nnn px;等）
将水平菜单与子菜单居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.