Nav is based on unordered <ul> list:
Code: Select all
<ul>
<?php
foreach ($staticContent as $staticPage) {
$children = $staticPage->children();
if (!$staticPage->isChild())
{
echo '<li class="nav-item parent">';
echo '<a class="nav-link" href="'. $staticPage->permalink().'">'.$staticPage->title().'</a>';
if ($staticPage->hasChildren())
{
echo PHP_EOL.'<ul class="child">'.PHP_EOL;
foreach ($children as $child)
{
echo '<li class="nav-item child"><a href="'.$child->permalink().'">'.$child->title().'</a></li>'.PHP_EOL;
}
echo '</ul>'.PHP_EOL;
}
echo '</li>'.PHP_EOL;
}
}?>
</ul>
Stylizing such dropdown menu with css is up to you.
Although you can start stylizing the menu using below simple css
Code: Select all
ul {list-style: none;padding: 0;margin: 0;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block;padding: 5px;text-decoration: none;}
ul li:hover {background: #f1f1f1;}
li:hover ul {display: block; position: absolute;min-width:100%;background: #f1f1f1;}
li:hover li {float: none;}
li li a:hover {color:#FFF;background: #9f9f9f;}