Mac Finder (not finished)

index.html

<div id="bar">
  <ul>
    <li class="menuItem">
      
      <ul class="submenu">
        <li>Om denne mac</li>
        <li>Softwareopdatering...</li>
        <li>App store...</li>
        <hr>
          <li>Systemindstillinger</li>
      </ul>
    </li>
    <li class="menuItem">Chrome</li>
    <li class="menuItem">Fil</li>
    <li class="menuItem">Rediger</li>
    <li class="menuItem">Vis</li>
    <li class="menuItem">Historik</li>
    <li class="menuItem">Bogmærker</li>
    <li class="menuItem">Vindue</li>
    <li class="menuItem">Hjælp</li>
  </ul>
</div>

Mac-Finder-(not-finished).markdown

Mac Finder (not finished)

A Pen by Peter Bork on CodePen.

License.

style.css

*{
  margin: 0px;
  font-family: arial;
}
body{
  background-image: url('http://www.tonymacx86.com/attachments/apple-news-rumors/58155d1370539336-mac-os-x-10-0-10-8-wallpaper-intro-videos-defaultdesktop.jpg');
  background-size: cover;
}
#bar{
  width: 100%;
  height: 24px;
  background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
ul, li{
  list-style: none;
  padding: 0;
  cursor: default;
}
.menuItem{
  float: left;
  margin-right: 10px;
  padding-top: 3px;
  font-family: arial;
  color: #505050;
  padding: 3px 8px 3px 8px;
  
}
.menuItem:first-of-type{
  font-size: 1.2em;
  margin-left: 10px;
  padding: 3px 8px 0px 8px;
  height: 21px;
}
.menuItem:nth-child(2){
  font-weight: bold;
}
.menuItem:hover{
  background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top,  #4096ee 0%, #405fed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#405fed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4096ee 0%,#405fed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#405fed',GradientType=0 ); /* IE6-9 */
color: #fff;
}
.submenu{
  opacity: 1 !important;
  background-color: #fff;
  padding: 5px 5px 0px 15px;
  position: absolute;
  margin-top: -2px;
  margin-left: -8px;
  border-radius: 0px 0px 5px 5px;
  font-size: .85em;
  color: #333;
}

.submenu li{
  padding: 2px 0px;
  
}
.submenu li:hover{
  
  background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top,  #4096ee 0%, #405fed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#405fed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4096ee 0%,#405fed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4096ee 0%,#405fed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#405fed',GradientType=0 ); /* IE6-9 */
}

.submenu hr{
  width: 110%;
  margin: 5px 0px 5px -15px;
}