News Tickets Head

by Muhammad Hassaan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div id="tophead">
  <div class="container">
    <div class="top-news">
      <span class="top-news-title">News:						</span>
      <div id="news-ticker" style="position: relative; height: 21px; overflow: hidden;">
        <div class="news-ticker-inner-wrap" style="margin: 0px; position: absolute; top: 0px;">
          <div class="list" style="margin: 0px; display: block;">
            <a href="https://wp-themes.com/?p=19">Worth A Thousand Words</a>
          </div>
          <div class="list" style="margin: 0px; display: block;">
            <a href="https://wp-themes.com/?p=36">Elements</a>
          </div>
          <div class="list" style="margin: 0px; display: block;">
            <a href="https://wp-themes.com/?p=14">More Tags</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#tophead {
  background-color: #179bd7;
  clear: both;
  float: left;
  width: 100%;
}

.header-social {
  float: right;
  margin-top: 20px;
  padding: 0 15px;
}

#top-nav {
  display: block;
  float: right;
  transition: all 0.5s ease-in-out 0s;
  width: auto;
}

#top-nav ul {
  display: block;
  margin: 0;
  padding: 0;
}

#top-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 235px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  display: block;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.2s ease;
  -webkit-transition: -webkit-transform 0.5s ease, opacity 0.2s ease;
  background-color: #179BD9;
  padding: 5px 20px 0;
}

#top-nav ul li:hover > ul.sub-menu {
  display: block;
  opacity: 1;
  z-index: 1000;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  transition: transform 0.3s ease, opacity 0.2s ease .1s;
  -webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease .1s;
}

#top-nav ul ul ul {
  left: 100%;
  top: 0
}

#top-nav li {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-block;
  float: left;
  margin-bottom: 0;
  padding-left: 5px;
  position: relative;
}

#top-nav li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

#top-nav li li {
  float: none;
  display: block;
  margin: 0;
  float: left;
  width: 100%;
  padding: 0;
}

#top-nav ul li li:first-child > a {
  border-left: none;
}

#top-nav ul li a {
  color: rgba(255, 255, 255, 0.75);
  display: block;
  padding: 10px;
  position: relative;
  z-index: 99;
}

#top-nav ul ul a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 14px;
  height: auto;
  padding: 10px 0;
  text-align: left;
  width: 100%;
  border-left: none;
  border-right: none;
}

#top-nav ul ul li:last-child a {
  border-bottom: none;
}

#top-nav ul ul...