0
アンカーディスプレイをブロックして設定するのに疲れました。最大幅を100％に設定してはいけません。アンカーをブロック要素にして、すべてを幅全体に広げますか？なぜこれが機能していないのですか？どうすればそれを動作させることができますか？おかげで、あなたのULの幅を制約され私は応答性の高いページを持っており、私は自分のドロップメニューを最小のウィンドウサイズの中心に置くことはできません。
html {
font-size: 1em;
}
body {
margin: auto;
padding: 0;
max-width: 100%;
}
header {
background-image: url('../img/MountainsTestImage.jpg');
background: cover;
background-repeat: none;
margin: 0;
padding: 0;
max-width: 100%;
}
.main-title {
padding: 20px;
text-align: center;
margin: auto;
color: orange;
font-size: 2.5em;
}
nav {
color: white;
background-color: orange;
margin: auto;
padding: 0;
max-width: 100%;
}
nav li > span,
nav a {
font-size: 1.3em;
}
nav ul {
padding: 0;
text-align: center;
max-width: 100%;
margin: auto;
}
nav li {
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgba(0, 0, 0, .1);
list-style: none;
max-width: 100%;
}
.main-nav:hover {
background-color: #ffcc33;
}
nav a {
text-decoration: none;
color: orange;
}
.home-page a:visited {
color: white;
}
nav a:visited {
color: orange;
}
nav a,
span {
font-weight: 700;
}
.active {
background-color: #ffcc33;
}
.main-nav {
position: relative;
}
.sub-nav li:hover {
text-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}
.sub-nav {
box-shadow: 5px 5px 10px rgba(0, 0, 0, .1);
z-index: 1;
position: absolute;
display: none;
background-color: white;
max-width: 100%;
}
.sub-nav li {
max-width: 100%;
}
.sub-nav li a {
display: block;
max-width: 100%;
}
.main-nav:hover .sub-nav {
display: block;
}
section {
margin: auto;
padding: 0;
max-width: 100%;
}
footer {
margin: auto;
padding: 0;
max-width: 100%;
}
@media screen and (min-width: 450px) {
nav li {
display: inline-block;
margin: 3px;
padding: 2px;
}
nav ul {
text-align: right;
padding: 0 5% 0 0;
}
.main-title {
text-align: left;
margin: 0 0 15px 15%;
padding: 15px 0 0 0;
color: orange;
font-size: 4em;
}
}<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1 class="main-title">This Is a Test</h1>
<nav>
<ul>
<li class="main-nav home-page active">
<a href="index.html">HOME</a>
</li>
<li class="main-nav">
<span> Content 1 </span>
<ul class="sub-nav">
<li><a href="page1.html">Page 1</a>
</li>
<li><a href="page2.html">Page 2</a>
</li>
<li><a href="page3.html">Page 3</a>
</li>
</ul>
</li>
<li class="main-nav">
<span> Content 2 </span>
<ul class="sub-nav">
<li><a href="page4.html">Page 4</a>
</li>
<li><a href="page5.html">Page 5</a>
</li>
<li><a href="page6.html">Page 6</a>
</li>
</ul>
</li>
<li class="main-nav">
<span> Content 3 </span>
<ul class="sub-nav">
<li><a href="page7.html">Page 7</a>
</li>
<li><a href="page1.html">Page 8</a>
</li>
<li><a href="page1.html">Page 9</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
あなたの
タグとカットの内側タグを入れて、そこに自分のCSSを貼り付ける必要があります。 –