Difference between revisions of "Team:Oxford/Templates/Nav"

Line 1: Line 1:
−
<html>
+
 
 
<head>
 
<head>
 
<style>
 
<style>
Line 83: Line 83:
  
  
−
 
−
<h1>Simple Pure CSS Drop Down Menu</h1>
 
 
<nav id="primary_nav_wrap">
 
<nav id="primary_nav_wrap">
 
<ul>
 
<ul>
Line 142: Line 140:
  
 
</body>
 
</body>
−
</html>
 

Revision as of 21:27, 26 June 2016

<head> <style>

  1. primary_nav_wrap

{ margin-top:15px }

  1. primary_nav_wrap ul

{ list-style:none; position:relative; float:left; margin:0; padding:0 }

  1. primary_nav_wrap ul a

{ display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif }

  1. primary_nav_wrap ul li

{ position:relative; float:left; margin:0; padding:0 }

  1. primary_nav_wrap ul li.current-menu-item

{ background:#ddd }

  1. primary_nav_wrap ul li:hover

{ background:#f6f6f6 }

  1. primary_nav_wrap ul ul

{ display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 }

  1. primary_nav_wrap ul ul li

{ float:none; width:200px }

  1. primary_nav_wrap ul ul a

{ line-height:120%; padding:10px 15px }

  1. primary_nav_wrap ul ul ul

{ top:0; left:100% }

  1. primary_nav_wrap ul li:hover > ul

{ display:block } </style> </head> <body>


<nav id="primary_nav_wrap">

  • <a href="#">Home</a>
  • <a href="#">Menu 1</a>
    • <a href="#">Sub Menu 1</a>
    • <a href="#">Sub Menu 2</a>
    • <a href="#">Sub Menu 3</a>
    • <a href="#">Sub Menu 4</a>
      • <a href="#">Deep Menu 1</a>
        • <a href="#">Sub Deep 1</a>
        • <a href="#">Sub Deep 2</a>
        • <a href="#">Sub Deep 3</a>
        • <a href="#">Sub Deep 4</a>
      • <a href="#">Deep Menu 2</a>
    • <a href="#">Sub Menu 5</a>
  • <a href="#">Menu 2</a>
    • <a href="#">Sub Menu 1</a>
    • <a href="#">Sub Menu 2</a>
    • <a href="#">Sub Menu 3</a>
  • <a href="#">Menu 3</a>
    • <a href="#">Sub Menu 1</a>
    • <a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
      • <a href="#">Category 1</a>
      • <a href="#">Category 2</a>
      • <a href="#">Category 3</a>
      • <a href="#">Category 4</a>
      • <a href="#">Category 5</a>
    • <a href="#">Sub Menu 3</a>
    • <a href="#">Sub Menu 4</a>
    • <a href="#">Sub Menu 5</a>
  • <a href="#">Menu 4</a>
  • <a href="#">Menu 5</a>
  • <a href="#">Menu 6</a>
  • <a href="#">Contact Us</a>

</nav>


</body>