Kawiesh

CSS DropDOWN

Dec 29th, 2019 (edited)
463
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.83 KB | None | 0 0
  1. #navigationbar
  2. { width: 100%; /* change the width of the navigation bar */
  3. height: 35px; /* change the height of the navigation bar */ }
  4.  
  5. #navigationcss
  6. { margin: 0 auto; padding: 0; }
  7.  
  8. #navigationcss ul
  9. { float: none; list-style: none; margin: 0; padding: 0; overflow: visible; }
  10.  
  11. #navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited
  12. { color: #ffffff; /* change color of the main links */
  13. display: block; margin: 0; padding: 10px 30px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */ }
  14.  
  15. #navigationcss li a:hover, #navigationcss li a:active
  16. { color: #FF69B4 ; /* change the color of the links when hovered over */ margin: 0; padding: 10px 30px; /* make sure these are the same as the section above! */ }
  17.  
  18. #navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited
  19. { background: #ffffff; /* change the background color of the drop down box */ width: 150px; color: #000000; /* change the color of the drop down links */ float: none; margin: 0; padding: 7px 10px; /* similar to above, change for the spacing around the links */ }
  20.  
  21. #navigationcss li li a:hover, #navigationcss li li a:active
  22. { background: #FF69B4 ; /* background color drop down items on hover */ color: #ffffff; /* color of drop down links on hover */ padding: 7px 10px; /* keep these the same as the above section */
  23. }
  24.  
  25. #navigationcss li
  26. { float: none; display: inline-block; list-style: none; margin: 0; padding: 0; }
  27.  
  28. #navigationcss li ul
  29. { z-index: 9999; position: absolute; left: -999em; height: auto; width: 150px; margin: 0; padding: 0; }
  30.  
  31. #navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul
  32.  
  33. { left: auto; }
Add Comment
Please, Sign In to add comment