了解CSS3实现的水平标题菜单

  <nav class="dropdownmenu">    <ul>      <li><a href="http://www.jochaho.com/wordpress/">益吾库</a></li>      <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li>      <li><a href="#">Articles on HTML5 & CSS3</a>        <ul id="submenu">          <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li>          <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li>          <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li>        </ul>      </li>      <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li>      <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li>    </ul>  </nav>

  .dropdownmenu ul, .dropdownmenu li {  	margin: 0;  	padding: 0;  }  .dropdownmenu ul {  	background: gray;  	list-style: none;  	width: 100%;  }  .dropdownmenu li {  	float: left;  	position: relative;  	width:auto;  }  .dropdownmenu a {  	background: #30A6E6;  	color: #FFFFFF;  	display: block;  	font: bold 12px/20px sans-serif;  	padding: 10px 25px;  	text-align: center;  	text-decoration: none;  	-webkit-transition: all .25s ease;  	-moz-transition: all .25s ease;  	-ms-transition: all .25s ease;  	-o-transition: all .25s ease;  	transition: all .25s ease;  }  .dropdownmenu li:hover a {  	background: #000000;  }  #submenu {  	left: 0;  	opacity: 0;  	position: absolute;  	top: 35px;  	visibility: hidden;  	z-index: 1;  }  li:hover ul#submenu {  	opacity: 1;  	top: 40px;	/* adjust this as per top nav padding top & bottom comes */  	visibility: visible;  }  #submenu li {  	float: none;  	width: 100%;  }  #submenu a:hover {  	background: #DF4B05;  }  #submenu a {  	background-color:#000000;  }