Display: none; not hiding my ul li ul li a

HTML-CSS
1

wtf.

<nav>
			<ul>
				<li><a href="#">OTHER</a>
					<ul>
						<li>
							<a href="#">OPTIONS</a>
						</li>
					</ul>
				</li>
		
			
		
		
		
			</ul>
		</nav>

* 
{
	margin: 0 auto;
	padding: 0;
	background-color: gray;
}

nav 
{
	background-color: blue;
	width: 100%;
	height: 80px;
	flex-direction: row;
}
ul li
{
	float: left;
	background-color: blue;
	text-decoration: none;
	list-style: none;
	
	
a 
{
	text-decoration: none;
}

ul li ul li a 
{
		display: none;!important
}
2

You’d be better off targetting the specific element with an id tag. That way the browser knows which list item you wish to not display.

3

It hides for me.

There is a typo you have though.

display: none;!important

Should be either:

display: none;

or

display: none !important;

1 Like
4

You haven’t closed your “ul li” section in the css with a }

1 Like
5

Use

ul > ul li a {
display:none;
}

6

as a suggestion, do not use !important. there should be no reason, when designing a web page from the ground up, to use !important since you have full control of the css being implemented. if you find you are using !important this early it should be a red flag that your design could be adjusted.

From the Mozilla Developer Network: Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

1 Like