-1
メニューバーのホームボタンに「a：hover」を設定できません。テキスト装飾を削除することさえできません。 私はメディアの問い合わせに手を差し伸べている間に、困惑しました。メニューバーのアクティブリンクが機能しない
****スタックオーバーフローの設定、私はより多くの詳細を追加しない限り、私は質問を投稿することができますされていません*****
body {
\t background-image: url("blue-bokeh.jpeg");
\t width: 100%;
\t height: 100%;
}
.wrap {
\t height: auto;
\t width: 90%;
\t margin: auto;
}
header {
\t background: #333;
\t color: white;
\t height: auto;
\t width:100%;
\t float: left;
}
header nav {
\t width: 100%;
\t height: auto;
}
header nav ul {
\t list-style: none;
\t height: auto;
\t width: auto; /* what happens if i change the value to 100% */
\t float: right;
\t margin-right:30px;
}
header nav ul li {
\t display: inline;
\t padding: 15px 30px;
\t float: left;
\t border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
\t background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
\t /*background: tomato;*/ /* get the code checked , if its repeated in .top class */
\t float: left;
\t margin-top: 20px;
\t border-radius: 10px;
\t /*padding: 20px 20px;*/
\t height: auto;
\t width: 60%;
\t margin-right: 2%;
}
.top {
\t background: tomato;
\t margin-bottom: 10px;
\t float: left;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.top h3 {
\t color: darkslategray
}
.bottom {
\t background: tomato;
\t margin-bottom: 50px;
\t float: left;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottom h3 {
\t color: darkslategray
}
.sidebar {
\t float: left;
\t height: auto;
\t width: 38%;
\t margin-top: 20px;
}
.topside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.middleside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottomside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
footer {
\t background: darkslategray;
\t float: left;
\t width: 100%;
\t height: auto;
\t border-radius: 10px;
}
footer p {
\t padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
\t ---------------------------------------------------------------------------------------------------------------------------------------------
\t ------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
@media screen and (max-width: 700px) {
body {
\t background-image: url("blue-bokeh.jpeg");
\t width: 100%;
\t height: 100%;
}
.wrap {
\t height: auto;
\t width: 90%;
\t margin: auto;
}
header {
\t background: #444;
\t color: white;
\t height: auto;
\t width:100%;
}
header nav {
\t width: 100%;
\t height: auto;
}
header nav ul {
\t list-style: none;
\t height: auto;
\t width: 100%; /* what happens if i change the value to 100% */
\t margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
\t display: block;
\t padding: 15px 30px;
float: none;
}
header nav ul li:hover {
\t background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
\t /*background: tomato;*/ /* get the code checked , if its repeated in .top class */
\t margin-top: 20px;
\t border-radius: 10px;
\t /*padding: 20px 20px;*/
\t height: auto;
\t width: 100%;
}
.top {
\t background: tomato;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.top h3 {
\t color: darkslategray
}
.bottom {
\t background: tomato;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottom h3 {
\t color: darkslategray
}
.sidebar {
\t height: auto;
\t width: 100%;
}
.topside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.middleside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottomside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
footer {
\t background: darkslategray;
\t float: left;
\t width: 100%;
\t height: auto;
\t border-radius: 10px;
}
footer p {
\t padding-left: 50px;
}
}
\t
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
\t <div class="wrap">
\t \t <header>
\t \t \t <nav>
\t \t \t \t <ul>
\t \t \t \t \t <li><a class="active" href="#home">Home</a></li>
\t \t \t \t \t <li>Portfolio</li>
\t \t \t \t \t <li>Blog</li>
\t \t \t \t \t <li>Contact Us</li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </header>
\t \t <div class="mainbody">
\t \t \t <article class="top">
\t \t \t \t <h3>First Post</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
\t \t \t </article>
\t \t \t <article class="bottom">
\t \t \t \t <h3>Second Post</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
\t \t \t </article>
\t \t </div> \t
\t \t <div class="sidebar">
\t \t \t <aside class="topside">
\t \t \t \t <h3>Top Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t \t <aside class="middleside">
\t \t \t \t <h3>Middle Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t \t <aside class="bottomside">
\t \t \t \t <h3>Bottom Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t </div>
\t \t <footer>
\t \t \t <p>Copyright © 2016 Faltoo Webdesigns</p> \t
\t \t </footer>
\t </div>
</body> \t
\t
</html>
あなたはより正確にすることはできますか？何が起こるはずですか？私はテキスト装飾は見ません。 – mxlse
私はそれがこのようになりたい（ホームボタンがアクティブで緑色であることを見てください） http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_responsive – Tarique
しかし、あなたは既にCSSコードを持っています... – mxlse