我有两个下拉菜单。一个水平和一个垂直。我希望他们在一个页面中，但它不能一起工作

时间：2018-05-29 11:25:28

标签： html css drop-down-menu

这是侧边菜单：

＆＃13;
＆＃13; 
/*Set the parent <li>’s CSS position property to ‘relative’.*/

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

/*The CSS to hide the sub menus.*/
li ul {
	margin-top: -50px;
	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 {
	margin-left: -120px;
	top: 0;
}
＆＃13; 
<!DOCTYPE html>
	<html lang="en-us">
		<head>
			<meta charset="UTF-8">
			<title>oldal.menu</title>
			<link rel="stylesheet"
				  type="text/css"
				  href="side.menu2.css"
		</head>
		<body>
			<div id="menu">
		    <ul>
				<li><a>Közérdekű adatok</a></li>
				<li><a>Járóbeteg szakellátó</a></li>
				<li><a>Álláslehetőségek</a></li>
				<li><a>Közszolgálati intézmények</a></li>
				<li><a>Civil szervezetek</a></li>
				<li><a>Egyházak</a>
					<ul>
						<li><a>Református egyház</a></li>
						<li><a>Katolikus egyház</a></li>
					</ul>
				</li>
				<li><a>Idegenforgalom</a>
					<ul>
						<li><a>Térkép</a></li>
						<li><a>Vadászat</a></li>
						<li><a>Horgászat</a></li>
						<li><a>Túrázás</a></li>
						<li><a>Szálláslehetőségek</a></li>
						<li><a>Kultúrális rendezvények</a></li>
					</ul>
				</li>
				<li><a>Galéria</a></li>
				<li><a>Kiadványok</a></li>
				<li><a>Cigándi hírmondó</a></li>
				<li><a>Árapasztó tározó</a></li>
				<li><a>Gazdahírek</a></li>
				<li><a>Archívum</a></li>
				<li><a>Eladó ingatlanok</a></li>
				<li><a>Hasznos linkek</a></li>
				<li><a>Kistérség</a></li>
				<li><a>Magyar Államkincstár</a></li>
				<li><a>TÁMOP-3.2.3/A-11/1-2012-0112</a></li>
				<li><a>Cigándi Járási Hivatal</a></li>
				<li><a>ITS projekt</a></li>
				<li><a>Település üzemeltetés</a></li>
				<li><a>Művészeti csoportok</a></li>
				<li><a>ÁNYK nyomtatványok</a></li>
			</ul>
			</div>
		</body>
	</html>
＆＃13;
＆＃13;
＆＃13;

现在我插入水平菜单：

＆＃13;
＆＃13; 
/*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;
}

#main-navigation {
	width: 100%;
}
#main-navigation ul:before,
#main-navigation ul:after {
	content: '';
	display:table;
	clear: both;
}
＆＃13; 
<!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.2.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>
</html>

So how to modify the code to put every menu in one page. I know the result is easy but my work is not working. I added unique name to all "ul" "li" and "a" but it did not work. The CSS file needs some modification.
＆＃13;
＆＃13;
＆＃13; 那么如何修改代码将每个菜单放在一个页面中。我知道结果很简单，但我的工作不起作用。我为所有人添加了唯一的名字＆＃34; ul＆＃34; ＆＃34;利＆＃34;和＆＃34; a＆＃34;但它不起作用。 CSS文件需要进行一些修改。

1 个答案:

答案 0 :(得分：0)

你的CSS是正确的。你只需要在你的css之前添加ID，如下所示。请在所有css属性中添加id。

#main-navigation ul
#menu ul

您也可以查看代码段。

/*Set the parent <li>’s CSS position property to ‘relative’.*/

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

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

/*Displays the dropdown menu on hover.*/
#main-navigation ul li:hover > ul {
	display: block;
	position: absolute;
}
#main-navigation ul li:hover li {
	float: none;
}
#main-navigation ul li:hover a {
	background: #1bc2a2;
}
#main-navigation ul 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.

*/
#main-navigation ul ul ul {
	left: 100%;
	top: 0;
}

#main-navigation {
	width: 100%;
}
#main-navigation ul:before,
#main-navigation ul:after {
	content: '';
	display:table;
	clear: both;
}


/*Set the parent <li>’s CSS position property to ‘relative’.*/

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

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

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

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

*/
#menu ul ul ul {
	margin-left: -120px;
	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>
	
  <div id="menu">
		    <ul>
				<li><a>Közérdekű adatok</a></li>
				<li><a>Járóbeteg szakellátó</a></li>
				<li><a>Álláslehetőségek</a></li>
				<li><a>Közszolgálati intézmények</a></li>
				<li><a>Civil szervezetek</a></li>
				<li><a>Egyházak</a>
					<ul>
						<li><a>Református egyház</a></li>
						<li><a>Katolikus egyház</a></li>
					</ul>
				</li>
				<li><a>Idegenforgalom</a>
					<ul>
						<li><a>Térkép</a></li>
						<li><a>Vadászat</a></li>
						<li><a>Horgászat</a></li>
						<li><a>Túrázás</a></li>
						<li><a>Szálláslehetőségek</a></li>
						<li><a>Kultúrális rendezvények</a></li>
					</ul>
				</li>
				<li><a>Galéria</a></li>
				<li><a>Kiadványok</a></li>
				<li><a>Cigándi hírmondó</a></li>
				<li><a>Árapasztó tározó</a></li>
				<li><a>Gazdahírek</a></li>
				<li><a>Archívum</a></li>
				<li><a>Eladó ingatlanok</a></li>
				<li><a>Hasznos linkek</a></li>
				<li><a>Kistérség</a></li>
				<li><a>Magyar Államkincstár</a></li>
				<li><a>TÁMOP-3.2.3/A-11/1-2012-0112</a></li>
				<li><a>Cigándi Járási Hivatal</a></li>
				<li><a>ITS projekt</a></li>
				<li><a>Település üzemeltetés</a></li>
				<li><a>Művészeti csoportok</a></li>
				<li><a>ÁNYK nyomtatványok</a></li>
			</ul>
			</div>

相关问题
最新问题