thatdevgirl · December 19, 2019 20:15
diff --git a/css-only-menu.css b/css-only-menu.css
 /**
 * CSS-only Menu
 */

 /* Link set up */

 nav a,
 nav a:visited { 
  text-decoration: none;
 }


 /* Navigation menu - first level */

 nav { 
  border-bottom: 4px solid #000; 
  box-shadow: 0 5px 0 #aaa; 
  height: 30px; 
  margin: 10px 0; 
 }

 nav > ul { 
  background: #000;
  display: block;
  float: left;
  margin: 0 0 0 10px;
 }

 nav > ul > li { 
  float: left;
 }

 nav > ul > li > a { 
  border: solid #555; 
  border-width: 1px 1px 4px; 
  color: #fff; 
  display: block; 
  margin: 0; 
  padding: 9px 30px; 
  text-transform: uppercase;
 }

 nav > ul > li:first-child > a { 
  border-left: 0;
 }

 nav > ul > li:hover > a { 
  border-bottom: 3px solid #fff;
  color: #fff;
 }


 /* Navigation menu - first level, active */

 nav a.active,
 nav a.active:hover,
 nav ul > li:hover > a.active { 
  background: #000; 
  border-bottom: 3px solid #ee0; 
  color: #ee0; }


 /* Navigation menu - second level */

 nav ul > li ul { 
  background: #fff; 
  border: 1px solid #000; 
  box-shadow: 2px 2px 4px #999; 
  display: none; margin: 0; 
  position: absolute; 
  z-index: 1000;
 }

 nav ul > li li { 
  float: none;
 }

 nav ul > li li a { 
  color: #000; 
  display: block; 
  margin: 0 1px; 
  padding: 8px 20px;
 }

 nav ul > li:hover ul { 
  display: block; 
 }

 nav ul > li li:hover {
  background: #DDD;
 }
diff --git a/css-only-menu.html b/css-only-menu.html
 <!DOCTYPE html>
 <html>
        
  <head>
    <title>CSS Menu</title>
    <link type="text/css" rel="stylesheet" href="css-only-menu.css" />
  </head>

  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>

        <li>
          <a href="#" class="active">Products</a>

          <ul>
            <li><a href="#">Sub Menu #1</a></li>
            <li><a href="#">Sub Menu #2</a></li>
            <li><a href="#">Sub Menu #3</a></li>
            <li><a href="#">Sub Menu #4</a></li>
          </ul>
        </li>

        <li><a href="#">Categories</a></li>

        <li>
          <a href="#">About Us</a>

          <ul>
            <li><a href="#">Sub Menu #1</a></li>
            <li><a href="#">Sub Menu #2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

 </html>