Advanced Search

HTML and CSS for drop down menu

/ Published in: HTML
Save to your folder(s)
Insert the attribute into linked CSS stylesheet

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. /* Nav menu with drop down feature */
  3.  
  4. #navMenu {
  5.     margin: 0;
  6.     padding: 0;
  7.  
  8. }
  9.  
  10. #navMenu ul {
  11.     margin: 0;
  12.     padding: 0;
  13.     line-height: 30px;
  14. }
  15.  
  16. #navMenu li {
  17.     margin: 0;
  18.     padding: 0;
  19.     list-style: none;
  20.     float: left;
  21.     position: relative;
  22.     background: red;
  23. }
  24.  
  25. #navMenu ul li a {
  26.     text-align: center;
  27.     font-family: "Comic Sans MS", cursive;
  28.     text-decoration: none;
  29.     height: 30px;
  30.     width: 150px;
  31.     display: block;
  32.     color: #FFF;
  33.     border: 1px solid white;
  34.     text-shadow: 1px 1px 1px #000;
  35. }
  36.  
  37. #navMenu ul ul {
  38.     position: absolute;
  39.     visibility: hidden;
  40.     top: 32px;
  41. }
  42.  
  43. #navMenu ul li:hover ul {
  44.     visibility:visible;
  45. }
  46.  
  47. /********************************/
  48.  
  49. #navMenu li:hover {
  50.     background: #09F;
  51. }
  52.  
  53. #navMenu ul li:hover ul li a:hover {
  54.     background: #E55451;
  55.     color: #000;
  56. }
  57.  
  58. #navMenu a:hover {
  59.     color: #000;
  60. }
  61.  
  62. #rightnav {
  63.     text-align: center;
  64.     float: right;
  65.     width: 139px;
  66.     height: 400px;
  67.     background-color: lightgreen;
  68.     border-left: 1px dashed #000000;
  69. }
  70.  
  71. /* end of nav menu */
  72. </style>
  73.  
  74.  
  75.  
  76. <header>
  77.                 <div id="buttonbar">
  78.                     <div id="navMenu">
  79.                         <ul>
  80.                             <li>
  81.                                 <a href="#">Products</a>
  82.                                 <ul>
  83.                                     <li>
  84.                                         <a href="#">Link Item</a>
  85.                                     </li>
  86.                                     <li>
  87.                                         <a href="#">Link Item</a>
  88.                                     </li>
  89.                                     <li>
  90.                                         <a href="#">Link Item</a>
  91.                                     </li>
  92.                                     <li>
  93.                                         <a href="#">Link Item</a>
  94.                                     </li>
  95.                                     <li>
  96.                                         <a href="#">Link Item</a>
  97.                                     </li>
  98.                                 </ul>
  99.                             </li><!-- end main LI --> 
  100.                         </ul><!-- end main UL -->
  101.                         <ul>
  102.                             <li>
  103.                                 <a href="#">Services</a>
  104.                                 <ul>
  105.                                     <li>
  106.                                         <a href="#">Link Item</a>
  107.                                     </li>
  108.                                     <li>
  109.                                         <a href="#">Link Item</a>
  110.                                     </li>
  111.                                     <li>
  112.                                         <a href="#">Link Item</a>
  113.                                     </li>
  114.                                     <li>
  115.                                         <a href="#">Link Item</a>
  116.                                     </li>
  117.                                     <li>
  118.                                         <a href="#">Link Item</a>
  119.                                     </li>
  120.                                 </ul>
  121.                             </li><!-- end main LI --> 
  122.                         </ul><!-- end main UL -->
  123.                         <ul>
  124.                             <li>
  125.                                 <a href="#">Events</a>
  126.                                 <ul>
  127.                                     <li>
  128.                                         <a href="#">Link Item</a>
  129.                                     </li>
  130.                                     <li>
  131.                                         <a href="#">Link Item</a>
  132.                                     </li>
  133.                                     <li>
  134.                                         <a href="#">Link Item</a>
  135.                                     </li>
  136.                                     <li>
  137.                                         <a href="#">Link Item</a>
  138.                                     </li>
  139.                                     <li>
  140.                                         <a href="#">Link Item</a>
  141.                                     </li>
  142.                                 </ul>
  143.                             </li><!-- end main LI --> 
  144.                         </ul><!-- end main UL -->
  145.                         <ul>
  146.                             <li>
  147.                                 <a href="#">Funny Stuff</a>
  148.                                 <ul>
  149.                                     <li>
  150.                                         <a href="#">Link Item</a>
  151.                                     </li>
  152.                                     <li>
  153.                                         <a href="#">Link Item</a>
  154.                                     </li>
  155.                                     <li>
  156.                                         <a href="#">Link Item</a>
  157.                                     </li>
  158.                                     <li>
  159.                                         <a href="#">Link Item</a>
  160.                                     </li>
  161.                                     <li>
  162.                                         <a href="#">Link Item</a>
  163.                                     </li>
  164.                                 </ul>
  165.                             </li><!-- end main LI --> 
  166.                         </ul><!-- end main UL -->
  167.                         <ul>
  168.                             <li>
  169.                                 <a href="#">Contact Us</a>
  170.                                 <ul>
  171.                                     <li>
  172.                                         <a href="#">Link Item</a>
  173.                                     </li>
  174.                                     <li>
  175.                                         <a href="#">Link Item</a>
  176.                                     </li>
  177.                                     <li>
  178.                                         <a href="#">Link Item</a>
  179.                                     </li>
  180.                                     <li>
  181.                                         <a href="#">Link Item</a>
  182.                                     </li>
  183.                                     <li>
  184.                                         <a href="#">Link Item</a>
  185.                                     </li>
  186.                                 </ul>
  187.                             </li><!-- end main LI --> 
  188.                         </ul><!-- end main UL --> 
  189.                     </div>
  190.                 </div>
  191.                 <div id="rightnav">This is the rightnav</div>
  192.                 <div id="body">This is the body</div>
  193.             </div>
  194.         </header>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.