API tools faq
paste
dithph

menu dropdown

dithph
Jul 29th, 2015
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title> Menu Horizontal (DropDown) CSS </title>
  5.     <style>
  6.     *{
  7.         padding: 0;
  8.         margin: 0
  9.     }
  10.  
  11.     #bg{
  12.         background-color: #830300;
  13.         top: 0px;
  14.         width: 100%;
  15.         height: 124px;
  16.         z-index: -1;
  17.         position: absolute;
  18.     }
  19.  
  20.     nav{
  21.         margin-top: 30px;
  22.     }
  23.  
  24.     h1{
  25.         text-indent: 30px;
  26.         color: orange;
  27.         font-size: 45px;
  28.         font-family: MV Boli;
  29.         margin-top: 20px;
  30.     }
  31.  
  32.     a{
  33.         text-decoration: none;
  34.         color: white;
  35.         padding: 100px;
  36.     }
  37.  
  38.     li{
  39.         list-style: none;
  40.         font-family: arial;
  41.         background-color: #3164F5;
  42.         width: 341.5px;
  43.         font-size: 20px;
  44.         height: 30px;
  45.         line-height: 30px;
  46.     }
  47.  
  48.     nav > ul > li{
  49.         float: left;
  50.     }
  51.  
  52.     li ul{
  53.         display: none;
  54.     }
  55.  
  56.     ul li:hover ul{
  57.         display: block;
  58.     }
  59.  
  60.     li:hover{
  61.         background-color: #60B9F7;
  62.     }
  63.  
  64.     li ul li:hover{
  65.         background-color: #60B9F7;
  66.     }
  67.  
  68.     li ul li a{
  69.         color: yellow;
  70.     }
  71.  
  72.     li ul li{
  73.         border-left: 1px solid red;
  74.         border-right: 1px solid red;
  75.         border-bottom: 1px solid red;
  76.     }
  77.  
  78.     ul li{
  79.         border-bottom: 1px solid red;
  80.     }
  81.  
  82.     </style>
  83. </head>
  84. <body>
  85.     <div id="bg"></div>
  86.     <h1><i> SELAMAT DATANG </i></h1>
  87.     <nav>
  88.         <ul>
  89.             <li><a href=""> MENU </a></li>
  90.             <li><a href=""> MENU </a></li>
  91.             <li><a href=""> MENU </a></li>
  92.             <li><a href=""> MENU </a>
  93.                 <ul>
  94.                     <li><a href=""> SUB MENU </a></li>
  95.                     <li><a href=""> SUB MENU </a></li>
  96.                     <li><a href=""> SUB MENU </a></li>
  97.                 </ul>
  98.             </li>
  99.         </ul>
  100.     </nav>
  101. </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!