Solutions Menu

A perfect and simple dropdown without any messy javascript to deal with!

by ajrdesign

HTML

<div class="solution_menu">
<ul>
    <li><a href="#">Industry &darr;</a>
        <ul>
            <li><a href="/solutions/ae.asp">Arkitektur og ingeni&oslash;rarbejde</a></li>
                <li><a href="/solutions/construction.asp">Konstruktion</a></li>
                <li><a href="/solutions/enterprise.asp">Enterprise</a></li>
                <li><a href="/solutions/government.asp">Regering - Ministerium</a></li>
                <li><a href="/solutions/legal.asp">Juridisk</a></li>
                <li><a href="/solutions/Mobility.asp">Mobilitet</a></li>
        </ul>
    </li>
    <li><a href="#">Workflow &darr;</a>
        <ul>
            <li><a href="/solutions/takeoffs.asp">Takeoffs</a></li>
                <li><a href="/solutions/adp.asp">ADP</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

.solution_menu ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.solution_menu ul li {
    display: inline;
    float: left;
}
.solution_menu li ul {
    display: none;
}
.solution_menu ul li a {
    display: inline-block;
    text-decoration: none;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    margin-left: 1px;
}
.solution_menu li:hover ul {
    display: block;
    position: absolute;
}
.solution_menu li:hover li {
    float: none;
    font-size: 11px;
}