要添加什么来使CSS更广泛？

时间：2018-06-01 11:13:04

标签： html css

侧面菜单位于显示屏的右侧，应该是显示屏的25％，但菜单不会完全填满。大小与其最长元素（在本例中为TÁMOP......）有关。我将宽度设置为100％，但它不起作用。如何让它完全填满？如果有可能，我会使用％not px。 

/*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;
}
<!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>

1 个答案:

答案 0 :(得分：0)

<!DOCTYPE html>
<html>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 5%;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    padding: 5%;
    text-align: center;
    background: white;
}

.header h1 {
    font-size: 500%;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 1%;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 1%;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 1%;
    margin-top: 1%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 1%;
    text-align: center;
    background: #ddd;
    margin-top: 1%;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 50em) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 25em) {
    .topnav a {
        float: none;
        width: 100%;
    }
}
/*slideshow*/
header.mySlides {display:none;}


/*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 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 li:hover > ul {
	display: block;
	position: absolute;
}
#main-navigation li:hover li {
	float: none;
}
 #main-navigation li:hover a {
	background: #1bc2a2;
}
#main-navigation 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%;
}
/*Start menu*/
#menu {
 width: 100%;
 display: inline-block;
 margin-left: 0px;
	margin-top: 0.6em;
}
#menu ul:before,
#menu 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: -18em;
	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;
}
.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;
}
</style>
</head>
<body>
<div class="header">
	<div class="w3-content w3-section" style="width: 100%">
  <img class="mySlides" src="cigand1.jpg" style="width:25%">
  <img class="mySlides" src="eu1.jpeg" style="width:25%">
  <img class="mySlides" src="hun1.jpg" style="width:25%">
</div>
</div>

<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 class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
				<div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
				<div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
				<div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
				<div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
		<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>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>
	<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
				x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 2 seconds
}
	</script>
</body>
</html>

相关问题
最新问题