Advertisement
lalatino

css dropdown menu

Jul 23rd, 2012
340
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.11 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Home - My gpEasy CMS</title>
  5.     <!-- link rel="stylesheet" type="text/css" href="style.css" / -->
  6.     <style type="text/css">
  7.  
  8. ul.menu_top
  9. {
  10.     float:left;
  11.     width:70%;
  12.     margin: 8px 100px 0 0;
  13.     border-radius:4px;
  14.     background-color: #c4092a;
  15.     list-style-type: none;
  16.     z-index:+1;
  17. }
  18.  
  19. ul.menu_top li
  20. {
  21.     float: left;
  22.     position: relative;
  23.     margin: 4px 2em 4px 4px;
  24.     padding: 0;
  25. }
  26.  
  27. ul.menu_top li ul
  28. {
  29.     visibility: hidden;
  30.     position: absolute;
  31.     top:100%;
  32.     left:0;
  33.     padding:0.5em;
  34.     list-style-type: none;
  35.     white-space:nowrap;
  36.     background-color: #c4092a;
  37.     border: 1px solid white;
  38.     border-radius:4px;
  39.     z-index:+1;
  40. }
  41.  
  42. ul.menu_top li:hover > ul
  43. {
  44.     visibility: visible;
  45.     z-index: +2;
  46. }
  47.  
  48. ul.menu_top li ul li
  49. {
  50.     padding: 0;
  51.     margin: 12px 4px;
  52.     float:none;
  53.     border:0;
  54.     min-width:3em;
  55. }
  56.  
  57. ul.menu_top li ul li ul
  58. {
  59.     top:0;
  60.     left:99%;
  61. }
  62.  
  63. ul.menu_top a {
  64.     background-color:#c4092a;
  65.     color:white;
  66.     text-decoration:none;
  67.     padding:4px;
  68.     font-size:18px
  69. }
  70.  
  71. ul.menu_top a:hover,
  72. ul.menu_top a.haschildren.childselected,
  73. ul.menu_top a.selected {
  74.     background-color:white;
  75.     color:blue;
  76.     text-decoration:none;
  77. }
  78.  
  79. ul.menu_top li a.haschildren:after {
  80.     content: "\00A0\00A0\25BC";
  81. }
  82.  
  83. a {
  84.     color:#0000aa;
  85.     background-color:inherit;
  86. }
  87.  
  88.     </style>
  89.  
  90. </head>
  91. <body>
  92. <ul class="menu_top">
  93.     <li><a href="/" title="Home" class="selected">Home</a></li>
  94.     <li><a href="/Help_Videos" title="Help Videos" class="haschildren">Help Videos</a><ul>
  95.         <li><a href="/Child_Page" title="Child Page">Child Page</a></li>
  96.         <li><a href="/Site_Map" title="Site Map" class="haschildren">Site Map</a><ul>
  97.             <li><a href="/Galleries" title="Galleries">Galleries</a></li>
  98.             <li><a href="/Missing" title="Missing">Missing</a></li></ul>
  99.         </li></ul>
  100.     </li>
  101.     <li><a href="/About" title="About" class="haschildren">About</a><ul>
  102.         <li><a href="/Contact" title="Contact">Contact</a></li></ul>
  103.     </li>
  104. </ul>
  105. </body>
  106. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement