You need to Validate your code first of all. I see <ul> elements as direct children of the <ol> but the only valid direct children can be <li>.
The nested <ul>s must be nested within the <li>s.
The css does not make a lot of sense either. Avoid adding fixed heights to content, allow the content to define its container’s height.
A 300 px width seems a bit tight, but anything above 300 should really be max-width instead of width to allow display on smaller screens.
Thanks Mittineague, but no way. I’ve changed “ul”, created a img class with {list-style-image: url(“img/right_arrow.png”); and tryied to create li with class img but with no success.
I wouldn’t use list image because it is too awkward to style and get right between browsers. Either use a background image or an actual image if the arrow is supposed to be content.
You could remove the bullet with list-style:none at the appropriate level and then use :before or :after to add the square (or use both as in my example below) assuming the arrow is just decoration.
I’m assuming you have fixed the html by now so hope I’m not giving too much away as this is your task to complete really
I would do something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.principal {
max-width:350px;
margin:auto;
padding:10px;
background:#f9f9f9f9;
line-height:1.4;
}
.principal ol {
list-style:decimal;
margin:1em 0;
padding:0 0 0 1.5em;
}
.principal li {
margin:0 0 .3em;
}
/* second level*/
.principal ul {
list-style:disc;
margin:1em 0;
padding:0 0 0 1.5em;
}
/* third level*/
.principal ul ul {
list-style:none;
margin:.5em 0;
padding:0;
}
.principal ul ul li a {
display:block;
position:relative;
padding:0 0 0 25px;
}
.principal ul ul li a:before, .principal ul ul li a:after {
content:"";
position:absolute;
left:0;
top:2px;
width:16px;
height:16px;
background:#787f89;
z-index:1;
}
.principal ul ul li a:after {
width:6px;
height:6px;
left:2px;
top:6px;
border-left:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(-133deg);
z-index:2;
}
.principal ul ul a {
text-decoration:none;
}
.principal ul ul span {
text-decoration:underline;
}
</style>
</head>
<body>
<div class="principal">
<ol>
<li><em>Influencers</em> de moda
<ul>
<li><a href="http://galmeetsglam.com/">Julia Engel</a></li>
<li><a href="http://galmeetsglam.com/">Julia Engel</a></li>
<li><a href="http://galmeetsglam.com/">Julia Engel</a></li>
</ul>
</li>
<li><em>Influencers</em> de tecnologia
<ul>
<li><em>Youtubers</em>
<ul>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
</ul>
</li>
<li><em>Entrepreneurs</em>
<ul>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
</ul>
</li>
<li><em>Social Media</em>
<ul>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
<li><a href="#"> <span>Gary Vaynerchuk</span></a></li>
</ul>
</li>
</ul>
<li><em>Influencers de fitness</em>
<ul>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
</ul>
</li>
<li><em>Influencers</em> de videojocs
<ul>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
<li><a href="#">Rachel Brathenm </a></li>
</ul>
</li>
</ol>
</div>
</body>
</html>
Many thanks PaulOB and the other people thatgived a hand to me… Only my last request. Currently I have a png image with the right arrow. It is possible to add the URL on the CSS and not drawing “by hand” the square and the two lines.
Add padding left to the anchor element on the third level ( much like my example above) and add the arrow image as a normal background image to the anchor (assuming it is decoration only).
Tha padding left should equal the width of your image element plus a little extra for spacing.
