Visit this website for more information. Looking to add a new submenu in the Services section under Office 365 Consulting, we have completed the backend work and now need to style it using CSS to resemble a submenu. Attempts at giving padding or margin resulted in the submenu disappearing, only reappearing when adjusting the width of other submenus. We were able to achieve the desired look by setting position:fixed, but this caused synchronization issues with the backend and database.
<ul id="mainmenu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="#">Services</a>
<ul>
@foreach($services->sortBy('sort') as $service)
<li>
<a href="/services/{!!$service->seo_url!!}">{!!$service->title!!}</a>
@if($service->id == $service->id)
<ul>
@foreach($subservices as $sub_service)
@if($sub_service->services_id == $service->id)
<li><a href="/services/subservices/{!!$sub_service->seo_url!!}">{!!$sub_service->name!!}</a></li>
@endif
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</li>
<li><a href="/news">News</a></li>
<li><a href="/price">Pricing</a></li>
<li><a href="/references">References</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
This is how the HTML structure looks like.
#mainmenu {
font-family: "Lexend";
font-size: 14px;
margin: 0 auto;
float: none;
}
#mainmenu ul {
margin: 0px 0px;
padding: 0px;
height: 30px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow: hidden;
background: #ffffff;
-webkit-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
-moz-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
}
#mainmenu li {
margin: 0px 0px;
padding: 0px 0px;
float: left;
display: inline;
list-style: none;
position: relative;
}
#mainmenu>li {
letter-spacing: 1px;
font-weight: 500;
}
...
These are some of the relevant classes used in styling the menu.