当前位置: 动力学知识库 > 问答 > 编程问答 >

Current class for navigation not working, in HTML/CSS

问题描述:

I am having issues getting my current class working. I want the current page's <nav> button to be a different color. I have tried all kinds of different ways to fixing this. I can get the text to change color but not the background colors. Here is what I have:

HTML

<nav>

<ul id="navlist">

<li><a class="current" href="index.html"> Home </a></li>

<li><a href="history.html"> Beer History </a></li>

<li><a href="brews.html"> Brews </a></li>

<li><a href="recipe.html"> Recipes </a></li>

<li><a href="about.html"> About Us </a></li>

<li><a href="contact.html"> Contact Us </a></li>

</ul>

</nav>

CSS

li.current a{

border: 2px solid #413B02;

padding: 10px;

text-decoration:none;

color: green;

background-color: #FFF;

}

nav{

list-style-type:none;

color: white;

font-size: 19px;

height: 40px;

line-height: 40px;

text-align:center;

font-family: "cinzelregular", Geneva, sans-serif;

padding: 30px;

}

li{

display:inline;

margin: 0;

}

ul#navlist a:link,a:visited{

background: linear-gradient(180deg,#E6E7E8, #654C36, #3D2210,#3D2210);

border: 2px solid #413B02;

padding: 10px;

text-decoration:none;

color: #FFF;

}

ul#navlist a:hover, a:active{

background: linear-gradient(180deg,#E6E7E8, #AA7A4C, #D36700);

border: 2px solid #413B02;

padding: 10px;

text-decoration:none;

color: black;

}

Please help. I'm completely lost.

网友答案:

HTML

<nav> 
    <ul id="navlist">
        <li><a class="current" href="index.html"> Home </a></li>
        <li><a href="history.html"> Beer History </a></li>
        <li><a href="brews.html"> Brews </a></li>
        <li><a href="recipe.html"> Recipes </a></li>
        <li><a href="about.html"> About Us </a></li>
        <li><a href="contact.html"> Contact Us </a></li>
    </ul>
</nav>

CSS

li a.current{ 
    border: 2px solid #413B02;
    padding: 10px;
    text-decoration:none;
    color: green;
    background-color: #FFF;
}

this will be work

but i will be prefer if you do something like this

HTML

<nav> 
    <ul id="navlist">
        <li class="current"><a href="index.html"> Home </a></li>
        <li><a href="history.html"> Beer History </a></li>
        <li><a href="brews.html"> Brews </a></li>
        <li><a href="recipe.html"> Recipes </a></li>
        <li><a href="about.html"> About Us </a></li>
        <li><a href="contact.html"> Contact Us </a></li>
    </ul>
</nav>

CSS

#navlist li a { 
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: green;
}

#navlist li.current a {
  background: #fff;
  color: green;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: