Code
HTML
<![CDATA[
<div class="news-filters clearfix">
<div class="collapse">Filter</div>
<ul>
<li><a href="/news">All</a></li>
<li class="active"><a href="https://medicine.wustl.edu/news/category/editors-picks/ ">Editors' Picks</a></li>
<li class="parent"><a href="">News Source</a>
<ul>
<li><a href="/news/type/news-release">News Releases</a></li>
<li><a href="/news/type/outlook">Outlook Magazine</a></li>
<li><a href="/news/type/profiles">Profiles</a></li>
<li><a href="/news/type/in-the-news">In the News</a></li>
<li><a href="/news/audio">Audio</a></li>
<li><a href="/news/type/video">Video</a></li>
</ul>
</li>
</ul>
</div>
]]>
CSS
<![CDATA[
a {
color: #A51417;
text-decoration: none;
}
.news-filters {
border-top: 0;
border-bottom: 1px solid #ccc;
padding-top: 0;
padding-bottom: 20px;
margin-bottom: 0;
clear: both;
position: relative;
min-height: 39px;
}
.news-filters > ul {
float: left;
}
.news-filters > ul > li,
.news-filters .collapse {
display: inline-block;
margin-right: 12px;
position: relative;
}
.news-filters > ul > li:last-child {
margin-right: 0;
}
.news-filters > ul > li > a,
.news-filters .collapse {
padding: 10px 15px;
background: #e3e3e3;
border-radius: 3px;
color: #333;
font-weight: 700;
display: block;
transition: 0.1s;
}
.news-filters > ul > li > a:hover {
background: #eee;
}
.news-filters .active a,
.news-filters .active a:hover {
background: #A51417;
color: #fff;
}
.news-filters .parent {
width: 140px;
}
.news-filters .collapse {
width: 110px;
display: none;
float: left;
cursor: pointer;
}
.news-filters .parent > a:after,
.news-filters .collapse:after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #A51417;
position: absolute;
right: 15px;
top: 17px;
color: #A51417;
}
.news-filters ul ul {
display: none;
position: absolute;
z-index: 5;
background: #fff;
width: 160px;
margin-top: 5px;
padding: 15px 12px;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba( 0,0,0,0.13 );
}
.news-filters .open + ul {
display: block;
}
.news-filters .open {
background: #eee;
}
.news-filters .parent .open:after,
.news-filters .visible:after {
border-top: none;
border-bottom: 4px solid #A51417;
}
.news-filters ul ul li {
margin-bottom: 5px;
}
.news-filters ul ul li:last-child {
margin-bottom: 0;
}
.news-filters ul ul li a {
color: #333;
display: block;
font-weight: 600;
padding: 5px 10px;
border-radius: 3px;
transition: 0.1s;
}
.news-filters ul ul li a:hover {
background: #f4f4f4;
}
.news-filters .search {
vertical-align: top;
position: relative;
}
.news-filters .search-btn {
display: none;
position: absolute;
right: 0;
}
.news-filters .search-btn img {
padding: 10px 10px 10px 5px;
display: block;
cursor: pointer;
}
.news-filters .search-news {
position: absolute;
z-index: 5;
right: 0;
top: 0;
background: #fff;
border-radius: 3px;
}
.news-filters .search-news.open {
display: block;
}
.news-filters .search-news input {
margin: 0;
padding: 8px 30px 8px 8px;
width: 300px; /* Switch back to 387px when topics get added back in */
height: 21px;
border-radius: 3px;
outline: 0;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 1px solid #ccc;
-webkit-appearance: none;
}
]]>
