Whenever I hover over one of the long <li> elements, the other elements shift to the right.
To view the fiddle code, click on the link below:
.footer_links{
margin-top:60px;
}
footer .ourServices{
display: inline-block;
float:left;
margin: 0px -10px 0px 77px;
}
footer .ourServices ul li,a,h3{
text-decoration: none;
color:white;
list-style: none;
}
footer .ourServices .columns_title{
text-transform: uppercase
}
footer .ourServices .columns_title{
margin-bottom:17px;
font-size:23px;
font-family:raleway-regular;
font-weight:lighter;
}
footer .ourServices ul li, h3{
margin-bottom:8px;
font-size:12px;
}
footer .ourServices ul li{
margin-top: 10px;
}
footer ul li:hover{
font-family: 'Open Sans';
font-weight:bold;
}<div class="footer_links">
<div class="ourServices">
<h3 class="columns_title">Connect</h3>
<ul>
<li>1234 Street Name</li>
<li>Suburb Title</li>
<li>State, Australia 400</li>
<li>Phone:(00) 000 000 000</li>
<li>fax:(00) 000 000 000</li>
<li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b42454d446b4e464a705484446">[email protected]</a></li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Our Services</h3>
<ul>
<li><a href="#">Comprehensive geriatric assessment</a></li>
<li><a href="#">Falls, mobility problems</a></li>
<li><a href="#">Incontinence</a></li>
<li><a href="#">Polypharmacy</a></li>
<li><a href="#">Osteoporosis</a></li>
<li><a href="#">Frailty</a></li>
</ul>
</div>
<div class="ourServices">
<h3 class="columns_title">Explore</h3>
<ul>
<li><a href="#">Our Doctors</a></li>
<li><a href="#">Treatments</a></li>
<li><a href="#">Appointments</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>View jsFiddle here: jsfiddle.net/#&togetherjs=kdkeI5Hnq6