Tạp Chí CNTT

<div id='mainmenu'>
    <div class='wrap'>
        <nav id='nav'>
            <ul>
                <li class='mhome'><a href='#'>Home</a></li>
                <li><a href='#'>News</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul class='submenu hidden'>
                        <li><a href='#'>Dropdown 1</a></li>
                        <li><a href='#'>Dropdown 2</a></li>
                        <li><a href='#'>Dropdown 3</a></li>
                        <li><a href='#'>Dropdown 4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Business</a></li>
                <li><a href='#'>Education</a></li>
                <li><a href='#'>Lifestyle</a></li>
                <li><a href='#'>Fashion</a></li>
                <li><a href='#'>Photo</a></li>
                <li><a href='#'>Video</a></li>
            </ul>
        </nav>
        <div class='clear'></div>
    </div>
</div>

*{margin:0;padding:0}

ul, li, li {
  list-style: none;
}

a {
  textdecoration: none;
}

#mainmenu {
  background: #222;
  height: 50px;
  width: 980px;
  margin: 25px auto;
  padding: 0;
  border-bottom: 5px solid #ee1133;
}

#submenu {
  background: transparent;
  margin-bottom: 10px;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav li {
  background: url(http://3.bp.blogspot.com/-GUh9UbWqUr4/UlBzMAlrbII/AAAAAAAABCI/dceZOq7l2tk/s1600/menuline.png) no-repeat right top;
  float: left;
  position: relative;
  padding: 0 28px 0 23px;
  margin: 0 0 0 0;
}

#nav li:last-child{
  background: none
}

#nav li a {
  color: #fff;
  display: inline-block;
  padding: 18px 0 18px 0;
  margin: 0 0 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

#nav ul li:hover {
  background-color: #ee1133;
  text-decoration: none;
}

#nav li:last-child a {
}

#nav ul.submenu {
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  position: absolute;
  top: 52px;
  left: 0px;
  width: 180px;
  z-index: 99;
  float: left;
  background: #2D2D2D!important;
  -webkit-box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  height: auto;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s ease 0;
  -o-transition: all .5s ease 0;
  transition: all .5s ease 0;
  -moz-transition: all .5s ease 0;
  padding: 0;
  border: 3px solid #d900000;
}

#nav ul.submenu li {
  float: none;
  border-bottom: 1px solid #222;
  border-top: 1px solid #383838;
  border-left: 0 none;
  margin: 0;
}

#nav li:hover ul.submenu {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  visibility: visible;
}

#nav ul.submenu li:first-child {
  border-top: 0 none;
}

#nav li.mhome {
  border: 0;
  margin-top: 0;
  background-color: #ee1133;
}