I’m pretty new to html and css. I’m trying to create a nav
block that contains a nested list. I want it to look like this:
But I cannot get the outer list to stack inline. It ends up looking like this:
What is wrong with this code?
nav a {
text-decoration: none;
}
nav#bottom {
background-color: rgb(27, 72, 220);
color: rgb(211, 211, 212);
padding: 15px;
}
nav#bottom ul {
list-style: none;
list-style-type: none;
list-style-image: none;
flex: 0 1 150px;
align-items: center;
}
nav#bottom ul>li {
font-size: 1em;
line-height: 1.8em;
list-style-type: none;
list-style: none;
display: inline;
align-items: center;
}
nav#bottom ul>li>ul>li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
nav#bottom ul a {
color: white;
text-decoration: none;
}
<footer>
<nav id="bottom">
<ul>
<li>
<ul>
<li>
<a href="mailto:[email protected]"><img id="emailIcon" src="./images/emailIcon.png" width="50" alt="email icon" /></a>
</li>
<li><a href="mailto:[email protected]">Email me</a></li>
</ul>
</li>
<li>
<ul>
<li>
<a href="www.linkedin.com/in"><img id="linkedin" src="./images/linkedInIcon.png" width="50" alt="linked in icon" /></a>
</li>
<li><a href="www.linkedin.com/in">My Linkedin Page</a></li>
</ul>
</li>
<li>
<ul>
<li>
<a href="tel:+1number"><img id="phoneIcon" src="./images/phoneIcon.png" width="50" alt="Phone Icon"></a>
</li>
<li><a href="tel:+1number">Call Me</a></li>
</ul>
</li>
</ul>
</nav>
</footer>
3
Answers
You do not need to add another unordered list
ul
inside the list elementsli
, you can use CSS flexbox to style it. I have modified your codes below, a summary of what I did is:nav#bottom ul
andnav#bottom ul > li
nav#bottom ul > li > ul > li
**HTML:
CSS:
This will achieve what your desired lookâ¨
You don’t need nested ul and li you can use (flex-direction: row) for larger devices and (flex-direction: column) for mobile devices.
For Example:
Larger Device:
Mobile Device:
The CSS you’ve written gets pretty convoluted pretty quickly, and with that many layers of styles you’re not likely to get a desirable result on refactor without revising basically the entire file every time for every little change you have to make.
There’s no need for multiple nested
<ul>
elements here, as we can imagine each "group" of links as one single node in the<nav>
. Because the<a>
tags are essentially identical, you can even include the<img>
and the link text as children of the same link.For example:
This is lower-level and easier to visualize, which will make it easier to style. Basically all that’s left is to treat the
<ul>
as a flexbox so that all of its children (the<li>
elements) can be displayed inline. The outer<div>
exists so that you can contain all of the links to as small an area as you’d like.With the above, I get a result almost identical to the goal you set, granted with image alts instead of the original files. Less is definitely more when it comes to HTML/CSS. Generally, the simpler the solution, the cleaner the result. Hope this helps!