user3244534 user3244534 - 1 month ago 6
HTML Question

CSS text-decoration:none; doesn't work

So i was reading a tutorial online about flexbox and tried to make a dropdown menu. But the only thing which doesn't work is that the text-decoration:none has no effect at all? i have to use color#fff to make the text white?

also why do i need to use the + sign and i cant use the > sign when displaying the dropdown menu?



header {
display: flex;
width: 100%;
z-index;
1000;
background: linear-gradient(to left, rgba(54, 194, 182, 0.96) 0, rgba(62, 188, 207, 0.96) 100%);
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}
header nav ul {
list-style: none;
margin 0;
padding 0;
display: flex;
justify-content: start;
}
header nav ul li {
position: relative;
flex: 0 1 auto;
}
header nav ul li:hover {
background: rgba(58, 162, 173, 1);
}
header nav ul li a {
align-items: flex-start;
display: flex;
font-size: 1.55rem;
font-weight: 200px;
letter-spacing: 1px;
max-width: 130px;
padding: 1rem 1.5rem;
text-decoration: none;
}
header nav ul li a + ul {
border-radius: 0 0 2px 2px;
display: none;
font-size: 1rem;
position: absolute;
width: 195px;
background: linear-gradient(to bottom, rgba(58, 162, 173, 1) 0, rgba(62, 188, 207, 0.96) 100%);
;
}
header nav ul li:hover a + ul {
display: block;
}

<header>
<nav role="navigation">
<ul>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/blog">
Blog
</a>
<ul>
<li><a href="#">Me</a>
</li>
<li><a href="#">Gaming</a>
</li>
<li><a href="#">Sport</a>
</li>
<li><a href="#">Web Design</a>
</li>
<li><a href="#">Web Development</a>
</li>
</ul>

</li>
<li>
<a href="/contact">
Contact
</a>
</li>
<li>
<a href="/forum">
Forum
</a>
</li>
</ul>
</nav>
</header>




Answer

text-decoration does not change color, it removes the anchors underline

The immediate sibling selector + is needed because targeted element is not a child of the a element, its a sibling

So when you use a rule like this, you'll need the +

header nav ul li:hover a + ul {
  display: block;
}

But if you change it like this you can use >

header nav ul li:hover > ul {
  display: block;
}
Comments