How to Make <ul> <li> as structured

Question

Q.1) My ul li structure is as below

<ul class="service">
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>

        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
    </ul>

I have write below CSS; but not getting exact output.

.service{width: 100em;}
.service li {display: inline-block; float: left; width: 10em; padding-left: 10px; margin-left: 10px;}
.service-sub li span:first-child{width:10px;}

I need output as below show in image.

Q.2) I also want to create the ul li structure as shown in picture.

For that i have written the below CSS, but i could not getting how to create that yellow color part.

.reseda-autommotive-img li {display:inline-block; border: 2px solid red; background-color: #252324; width: 100px; height: 100px; margin-left: 25px; } 

Answer 1

For the first part of your question, i copied your code over and just added this to the css, now it should look like the image you posted:

 .service { width: 100em; } .service li { display: inline-block; float: left; width: 12em; padding-left: 10px; margin-left: 10px; } .service-sub li span:first-child { width: 10px; } img { padding-right:15px; }

 <ul class="service"> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> </ul>

For the second part of your question I made this (looks bad when you run the snippet, but when you expand it it looks like the image). You will need to add the pictures yourself JSFIDDLE

 .repair, .trusted, .expertise, .low-cost { width: 150px; height: 150px; display: inline-block; background-color: black; margin: 20px; border: 2px solid red; } .red { width: 100px; height: 40px; display: inline-block; background-color: red; margin-left: 25px; margin-top: -20px; text-align: center; } .yellow { width: 750px; height: 120px; border: 2px solid yellow; border-radius: 50%; margin-top: 40px; margin-bottom: -85px; margin-left: 20px; z-index: 99; position: relative; }

 <div class="yellow"> </div> <div class="repair"> <div class="red"> <p>Repair</p> </div> </div> <div class="trusted"> <div class="red"> <p>Trusted</p> </div> </div> <div class="expertise"> <div class="red"> <p>Expertise</p> </div> </div> <div class="low-cost"> <div class="red"> <p>Low Cost</p> </div> </div>