Jack Man Jack Man - 6 months ago 13
CSS Question

Why are my links leaking?

I have divs that each open up to a different page. However, my links are leaking their reach beyond their respective div:



/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */

/* nav */

#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */

/* course div */

#course_div {
width: 1256px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
width: 205.5px;
height: 103px;
position: relative;
background: white;
}
#course_text {
position: relative;
left: 3px;
max-height: 20px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-table;
margin-right: 30px;
margin-bottom: 20px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
.course_main > a { text-decoration: none; color: #000; }
#author {
color: #333;
font-size: 13px;
position: relative;
top: -4px;
left: 5px;
}
#author_picture {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
top: 8px;
left: 3px;
padding: 1px;
border: 2px solid #D4D9DD;
}
#wish_heart {
font-size: 16px;
padding: 6px 10px 6px 10px;
color: #C7C7C7;
position: relative;
left: -4px;
top: 4px;
}
#wish_heart:hover {
color: #D23837;
}
#course_price {
color: #00B22D;
font-size: 18px;
letter-spacing: -1px;
position: relative;
left: 130px;
}
/* end of course div */

<!DOCTYPE html>
<html>

<head>
<title>Hacked Genius</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>

<body>
<!-- nav -->
<div id='nav'>

</div>
<!-- end of nav -->

<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a>
</li>
<li><a href="#">Mobile Apps</a>
</li>
<li><a href="#">Programming Languages</a>
</li>
<li><a href="#">Game Development</a>
</li>
<li><a href="#">Databases</a>
</li>
<li><a href="#">Software Testing</a>
</li>
<li><a href="#">Software Engineering</a>
</li>
<li><a href="#">Development Tools</a>
</li>
<li><a href="#">E-Commerce</a>
</li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a>
</li>
<li><a href="#">Entrepreneurship</a>
</li>
<li><a href="#">Communications</a>
</li>
<li><a href="#">Management</a>
</li>
<li><a href="#">Sales</a>
</li>
<li><a href="#">Strategy</a>
</li>
<li><a href="#">Operations</a>
</li>
<li><a href="#">Project Management</a>
</li>
<li><a href="#">Business Law</a>
</li>
<li><a href="#">Data and Anylytics</a>
</li>
<li><a href="#">Home Business</a>
</li>
<li><a href="#">Human Resources</a>
</li>
<li><a href="#">Industry</a>
</li>
<li><a href="#">Media</a>
</li>
<li><a href="#">Real Estate</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a>
</li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a>
</li>
<li><a href="#">Operating Systems</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a>
</li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a>
</li>
<li><a href="#">SAP</a>
</li>
<li><a href="#">Intuit</a>
</li>
<li><a href="#">Salesforce</a>
</li>
<li><a href="#">Oracle</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a>
</li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a>
</li>
<li><a href="#">Personal Finance</a>
</li>
<li><a href="#">Career Development</a>
</li>
<li><a href="#">Parenting & Relationships</a>
</li>
<li><a href="#">Happiness</a>
</li>
<li><a href="#">Religion & Spirituality</a>
</li>
<li><a href="#">Personal Brand Building</a>
</li>
<li><a href="#">Creativity</a>
</li>
<li><a href="#">Influence</a>
</li>
<li><a href="#">Self Esteem</a>
</li>
<li><a href="#">Stress Management</a>
</li>
<li><a href="#">Memory and Study Skills</a>
</li>
<li><a href="#">Motivation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a>
</li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a>
</li>
<li><a href="#">User Experience</a>
</li>
<li><a href="#">Game Design</a>
</li>
<li><a href="#">Design Thinking</a>
</li>
<li><a href="#">3D & Animation</a>
</li>
<li><a href="#">Fashion</a>
</li>
<li><a href="#">Architectural Design</a>
</li>
<li><a href="#">Interior Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a>
</li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a>
</li>
<li><a href="#">Branding</a>
</li>
<li><a href="#">Marketing Fundamentals</a>
</li>
<li><a href="#">Analystics & Automation</a>
</li>
<li><a href="#">Public Relations</a>
</li>
<li><a href="#">Advertising</a>
</li>
<li><a href="#">Video & Mobile Marketing</a>
</li>
<li><a href="#">Content Marketing</a>
</li>
<li><a href="#">Non-Digital Marketing</a>
</li>
<li><a href="#">Growth Hacking</a>
</li>
<li><a href="#">Affiliate Marketing</a>
</li>
<li><a href="#">Product Marketing</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a>
</li>
<li class="dir"><a href="#">Arts & Crafts</a>
</li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a>
</li>
<li><a href="#">Travel</a>
</li>
<li><a href="#">Gaming</a>
</li>
<li><a href="#">Home Improvement</a>
</li>
<li><a href="#">Pet Care & Training</a>
</li>
</ul>

<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a>
</li>
<li class="dir"><a href="#">Photography Fundamentals</a>
</li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a>
</li>
<li><a href="#">Black & White</a>
</li>
<li><a href="#">Photography Tools</a>
</li>
<li><a href="#">Mobile Photography</a>
</li>
<li><a href="#">Travel Photography</a>
</li>
<li><a href="#">Commercial Photography</a>
</li>
<li><a href="#">Wedding Photography</a>
</li>
<li><a href="#">Video Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a>
</li>
<li class="dir"><a href="#">General Health</a>
</li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a>
</li>
<li><a href="#">Yoga</a>
</li>
<li><a href="#">Mental Health</a>
</li>
<li><a href="#">Dieting</a>
</li>
<li><a href="#">Self Defense</a>
</li>
<li><a href="#">Safety & First Aid</a>
</li>
<li><a href="#">Dance</a>
</li>
<li><a href="#">Meditation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a>
</li>
<li class="dir"><a href="#">Spanish</a>
</li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a>
</li>
<li><a href="#">Japanese</a>
</li>
<li><a href="#">Portuguese</a>
</li>
<li><a href="#">Chinese</a>
</li>
<li><a href="#">Russian</a>
</li>
<li><a href="#">Latin</a>
</li>
<li><a href="#">Arabic</a>
</li>
<li><a href="#">Hebrew</a>
</li>
<li><a href="#">Italian</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a>
</li>
<li class="dir"><a href="#">Production</a>
</li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a>
</li>
<li><a href="#">Music Techniques</a>
</li>
<li><a href="#">Music Software</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>

<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a>
</li>
<li class="dir"><a href="#">Math & Science</a>
</li>
<li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
<!-- end of info nav -->

<div id='course_div'>
<div class='course_main'>
<a href='hi'>
<img src='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='course_img'>

<div id='course_info'>
<div id='course_text'>Become a Game Maker with Game Maker Studio</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/6813534_cefd_2.jpg' id='author_picture'> <span id='author'> Benjamin Anderson </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $30 </span>
</div>
</a>
</div>
<div class='course_main'>
<a href='bye'>

<img src='https://udemy-images.udemy.com/course/480x270/383612_5575_5.jpg' id='course_img'>

<div id='course_info'>
<div id='course_text'>Bake Artisan Sourdough Bread Like a Professional</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/1718672_52e9_8.jpg' id='author_picture'> <span id='author'> Teresa L Greenway </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $50 </span>
</div>

</a>
</div>
</div>
</body>

</html>





I apologize the formatting of the divs is so messy. This HTML is actually generated by a PHP while loop, which isn't known for formatting code nicely. There is a blue line by the second div, which is actually a link. I can click on the link outside the div. Why is the link leaking?

Answer

Move your div outside of the links and then add css rule: .course_main > a { text-decoration: none; } to correct styling.

<div class='course_main'>
  <a href='hi'>

  </a>
</div>
<div class='course_main'>
  <a href='bye'>

  </a>
</div>

/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* course div */

#course_div {
  width: 1256px;
  position: relative;
  left: 180px;
  top: 30px;
  padding: 10px;
}
#course_img {
  width: 216px;
  height: 121.5px;
  border: 1px solid #ccc;
  border-bottom: none;
}
#course_info {
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
  top: -4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  width: 205.5px;
  height: 103px;
  position: relative;
  background: white;
}
#course_text {
  position: relative;
  left: 3px;
  max-height: 20px;
}
a .course_main {
  text-decoration: none;
  color: black;
  width: 204px;
}
.course_main {
  width: 216px;
  display: inline-table;
  margin-right: 30px;
  margin-bottom: 20px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                            not supported by any browser */
}
.course_main > a { text-decoration: none; color: #000; }
#author {
  color: #333;
  font-size: 13px;
  position: relative;
  top: -4px;
  left: 5px;
}
#author_picture {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  top: 8px;
  left: 3px;
  padding: 1px;
  border: 2px solid #D4D9DD;
}
#wish_heart {
  font-size: 16px;
  padding: 6px 10px 6px 10px;
  color: #C7C7C7;
  position: relative;
  left: -4px;
  top: 4px;
}
#wish_heart:hover {
  color: #D23837;
}
#course_price {
  color: #00B22D;
  font-size: 18px;
  letter-spacing: -1px;
  position: relative;
  left: 130px;
}
/* end of course div */
<!DOCTYPE html>
<html>

<head>
  <title>Hacked Genius</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
  <link rel='stylesheet' href='main.css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
  <script src='main.js'></script>
</head>

<body>
  <!-- nav -->
  <div id='nav'>

  </div>
  <!-- end of nav -->

  <!-- info nav -->
  <nav id="primary_nav_wrap">
    <ul>
      <li><a href="#">Development</a>
        <ul>
          <li><a href="#">Web Development</a>
          </li>
          <li><a href="#">Mobile Apps</a>
          </li>
          <li><a href="#">Programming Languages</a>
          </li>
          <li><a href="#">Game Development</a>
          </li>
          <li><a href="#">Databases</a>
          </li>
          <li><a href="#">Software Testing</a>
          </li>
          <li><a href="#">Software Engineering</a>
          </li>
          <li><a href="#">Development Tools</a>
          </li>
          <li><a href="#">E-Commerce</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Business</a>
        <ul>
          <li><a href="#">Finance</a>
          </li>
          <li><a href="#">Entrepreneurship</a>
          </li>
          <li><a href="#">Communications</a>
          </li>
          <li><a href="#">Management</a>
          </li>
          <li><a href="#">Sales</a>
          </li>
          <li><a href="#">Strategy</a>
          </li>
          <li><a href="#">Operations</a>
          </li>
          <li><a href="#">Project Management</a>
          </li>
          <li><a href="#">Business Law</a>
          </li>
          <li><a href="#">Data and Anylytics</a>
          </li>
          <li><a href="#">Home Business</a>
          </li>
          <li><a href="#">Human Resources</a>
          </li>
          <li><a href="#">Industry</a>
          </li>
          <li><a href="#">Media</a>
          </li>
          <li><a href="#">Real Estate</a>
          </li>
          <li><a href="#">Other</a>
          </li>
        </ul>
      </li>
      <li><a href="#">IT & Software</a>
        <ul>
          <li class="dir"><a href="#">IT Certification</a>
          </li>
          <li class="dir"><a href="#">Network & Security</a>
            <li><a href="#">Hardware</a>
            </li>
            <li><a href="#">Operating Systems</a>
            </li>
            <li><a href="#">Other</a>
            </li>
        </ul>
        <li><a href="#">Office Productivity</a>
          <ul>
            <li class="dir"><a href="#">Microsoft</a>
            </li>
            <li class="dir"><a href="#">Apple</a>
              <li><a href="#">Google</a>
              </li>
              <li><a href="#">SAP</a>
              </li>
              <li><a href="#">Intuit</a>
              </li>
              <li><a href="#">Salesforce</a>
              </li>
              <li><a href="#">Oracle</a>
              </li>
              <li><a href="#">Other</a>
              </li>
          </ul>
          <li><a href="#">Personal Development</a>
            <ul>
              <li class="dir"><a href="#">Personal Transformation</a>
              </li>
              <li class="dir"><a href="#">Productivity</a>
                <li><a href="#">Leadership</a>
                </li>
                <li><a href="#">Personal Finance</a>
                </li>
                <li><a href="#">Career Development</a>
                </li>
                <li><a href="#">Parenting & Relationships</a>
                </li>
                <li><a href="#">Happiness</a>
                </li>
                <li><a href="#">Religion & Spirituality</a>
                </li>
                <li><a href="#">Personal Brand Building</a>
                </li>
                <li><a href="#">Creativity</a>
                </li>
                <li><a href="#">Influence</a>
                </li>
                <li><a href="#">Self Esteem</a>
                </li>
                <li><a href="#">Stress Management</a>
                </li>
                <li><a href="#">Memory and Study Skills</a>
                </li>
                <li><a href="#">Motivation</a>
                </li>
                <li><a href="#">Other</a>
                </li>
            </ul>

            <li><a href="#">Design</a>
              <ul>
                <li class="dir"><a href="#">Web Design</a>
                </li>
                <li class="dir"><a href="#">Graphic Design</a>
                  <li><a href="#">Design Tools</a>
                  </li>
                  <li><a href="#">User Experience</a>
                  </li>
                  <li><a href="#">Game Design</a>
                  </li>
                  <li><a href="#">Design Thinking</a>
                  </li>
                  <li><a href="#">3D & Animation</a>
                  </li>
                  <li><a href="#">Fashion</a>
                  </li>
                  <li><a href="#">Architectural Design</a>
                  </li>
                  <li><a href="#">Interior Design</a>
                  </li>
                  <li><a href="#">Other</a>
                  </li>
              </ul>

              <li><a href="#">Marketing</a>
                <ul>
                  <li class="dir"><a href="#">Digital Marketing</a>
                  </li>
                  <li class="dir"><a href="#">Search Engine Optimization</a>
                    <li><a href="#">Social Media Marketing</a>
                    </li>
                    <li><a href="#">Branding</a>
                    </li>
                    <li><a href="#">Marketing Fundamentals</a>
                    </li>
                    <li><a href="#">Analystics & Automation</a>
                    </li>
                    <li><a href="#">Public Relations</a>
                    </li>
                    <li><a href="#">Advertising</a>
                    </li>
                    <li><a href="#">Video & Mobile Marketing</a>
                    </li>
                    <li><a href="#">Content Marketing</a>
                    </li>
                    <li><a href="#">Non-Digital Marketing</a>
                    </li>
                    <li><a href="#">Growth Hacking</a>
                    </li>
                    <li><a href="#">Affiliate Marketing</a>
                    </li>
                    <li><a href="#">Product Marketing</a>
                    </li>
                    <li><a href="#">Other</a>
                    </li>
                </ul>

                <li><a href="#">Lifestyle</a>
                  <ul>
                    <li class="dir"><a href="#">Life Hacks</a>
                    </li>
                    <li class="dir"><a href="#">Arts & Crafts</a>
                    </li>
                    <li class="dir"><a href="#">Food & Beverage</a>
                      <li><a href="#">Beauty & Makeup</a>
                      </li>
                      <li><a href="#">Travel</a>
                      </li>
                      <li><a href="#">Gaming</a>
                      </li>
                      <li><a href="#">Home Improvement</a>
                      </li>
                      <li><a href="#">Pet Care & Training</a>
                      </li>
                  </ul>

                  <li><a href="#">Photography</a>
                    <ul>
                      <li class="dir"><a href="#">Digital Photography</a>
                      </li>
                      <li class="dir"><a href="#">Photography Fundamentals</a>
                      </li>
                      <li class="dir"><a href="#">Portraits</a>
                        <li><a href="#">Landscape</a>
                        </li>
                        <li><a href="#">Black & White</a>
                        </li>
                        <li><a href="#">Photography Tools</a>
                        </li>
                        <li><a href="#">Mobile Photography</a>
                        </li>
                        <li><a href="#">Travel Photography</a>
                        </li>
                        <li><a href="#">Commercial Photography</a>
                        </li>
                        <li><a href="#">Wedding Photography</a>
                        </li>
                        <li><a href="#">Video Design</a>
                        </li>
                        <li><a href="#">Other</a>
                        </li>
                    </ul>

                    <li><a href="#">Health & Fitness</a>
                      <ul>
                        <li class="dir"><a href="#">Fitness</a>
                        </li>
                        <li class="dir"><a href="#">General Health</a>
                        </li>
                        <li class="dir"><a href="#">Sports</a>
                          <li><a href="#">Nutrition</a>
                          </li>
                          <li><a href="#">Yoga</a>
                          </li>
                          <li><a href="#">Mental Health</a>
                          </li>
                          <li><a href="#">Dieting</a>
                          </li>
                          <li><a href="#">Self Defense</a>
                          </li>
                          <li><a href="#">Safety & First Aid</a>
                          </li>
                          <li><a href="#">Dance</a>
                          </li>
                          <li><a href="#">Meditation</a>
                          </li>
                          <li><a href="#">Other</a>
                          </li>
                      </ul>

                      <li><a href="#">Language</a>
                        <ul>
                          <li class="dir"><a href="#">English</a>
                          </li>
                          <li class="dir"><a href="#">Spanish</a>
                          </li>
                          <li class="dir"><a href="#">German</a>
                            <li><a href="#">French</a>
                            </li>
                            <li><a href="#">Japanese</a>
                            </li>
                            <li><a href="#">Portuguese</a>
                            </li>
                            <li><a href="#">Chinese</a>
                            </li>
                            <li><a href="#">Russian</a>
                            </li>
                            <li><a href="#">Latin</a>
                            </li>
                            <li><a href="#">Arabic</a>
                            </li>
                            <li><a href="#">Hebrew</a>
                            </li>
                            <li><a href="#">Italian</a>
                            </li>
                            <li><a href="#">Other</a>
                            </li>
                        </ul>

                        <li><a href="#">Music</a>
                          <ul>
                            <li class="dir"><a href="#">Instruments</a>
                            </li>
                            <li class="dir"><a href="#">Production</a>
                            </li>
                            <li class="dir"><a href="#">Music Fundamentals</a>
                              <li><a href="#">Vocal</a>
                              </li>
                              <li><a href="#">Music Techniques</a>
                              </li>
                              <li><a href="#">Music Software</a>
                              </li>
                              <li><a href="#">Other</a>
                              </li>
                          </ul>

                          <li><a href="#">Academics</a>
                            <ul>
                              <li class="dir"><a href="#">Social Science</a>
                              </li>
                              <li class="dir"><a href="#">Math & Science</a>
                              </li>
                              <li class="dir"><a href="#">Humanities</a>
                            </ul>


    </ul>
  </nav>
  <!-- end of info nav -->

  <div id='course_div'>
    <div class='course_main'>
      <a href='hi'>
        <img src='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='course_img'>

        <div id='course_info'>
          <div id='course_text'>Become a Game Maker with Game Maker Studio</div>
          <br>
          <img src='https://udemy-images.udemy.com/user/50x50/6813534_cefd_2.jpg' id='author_picture'> <span id='author'> Benjamin Anderson </span> 
          <br>
          <i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i>  <span id='course_price'> $30 </span>
        </div>
    </a>
    </div>
    <div class='course_main'>
    <a href='bye'>
      
        <img src='https://udemy-images.udemy.com/course/480x270/383612_5575_5.jpg' id='course_img'>

        <div id='course_info'>
          <div id='course_text'>Bake Artisan Sourdough Bread Like a Professional</div>
          <br>
          <img src='https://udemy-images.udemy.com/user/50x50/1718672_52e9_8.jpg' id='author_picture'> <span id='author'> Teresa L Greenway </span> 
          <br>
          <i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i>  <span id='course_price'> $50 </span>
        </div>
      
    </a>
      </div>
  </div>
</body>

</html>

Comments