HTML/CSS,我创建了一个带有导航栏的网站,但由于某种原因,当我单击子菜单链接时无法使用

HTML/CSS, i created a website with a navigation bar but for some reason wont work when i click submenu links

HTML/CSS,我创建了一个带有导航栏的网站,但出于某种原因,当我单击子菜单 links 时,有些工作正常,有些则没有。例如在我的页面上,如果你将鼠标悬停在输入上,它会给你 3 个下拉菜单,如果你点击 "add business" 然后点击 "add category" 它不会工作(它不会将你重定向到 "add category pg" )

这里是 link 网站:http://output.jsbin.com/rebokab

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <!--
    Created using JS Bin
    http://jsbin.com

    Copyright (c) 2017 by njp98 (http://jsbin.com/rebokab/25/edit)

    Released under the MIT license: http://jsbin.mit-license.org
    -->
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width">
    <title>Homepage</title>

    <style id="jsbin-css">
    body {
    background-color: White;
    }


    .intro-header{
    background-image: 
    url('http://www.corporatelivewire.com/images/deals/1320/2021321577.jpg')

    }


    .site-heading{
    color:white; 
    font-weight:bold;
    font-family:copperplate;
    text-align: center;

    }




    .subheading{
    color:white;
    font-size:30px; 
    font-weight:bold;
    font-family:copperplate;
    text-align:center;
    }


    .Course{
    text-align: center;
    }

    .PD{
    text-align: center;
    }

    .ERD{
    text-align: center;
    }

    .LINKS{
    text-align: center;
    }

    p{
    font-weight:bold;
    }
    .container{
    text-align: center;
    }

    .navigation {
    background: blue;
    }

    .navigation ul {
    float: left;
    list-style: none;
    }

    .navigation ul a {
    color: black;
    text-decoration: none;
    font-weight: bold;
  font-size: 18px;
  padding: 0 15px;
  line-height: 32px;
}

.navigation ul li {
  float: left;
  position: relative; /* optional but safe */
}

.navigation ul li:hover {
  background: #666;
}

.navigation ul li:hover a {
  color: #ddd;
  text-decoration: underline;
}

.navigation ul ul {
  position: absolute;
  background: #000;
  display: none;
}

.navigation ul ul li {
  float: none;  /* optional but safe */
  width: 250px;
}

.navigation ul li:hover > ul {
  display: block;
}

.navigation ul ul ul {
  display:none;
  left: 100%;
  background: #333;
  top: 0
}

@media screen and (max-width: 780px) {

  .navigation ul li {
    float: none;
  }

  .navigation ul ul {
    z-index: 1
  }

  .navigation ul ul ul {
    left: 25%;
    top: 100%;
    /* width: 200px; */
  }

}

</style>
</head>
<body>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


  <!-- Navigation -->
   <nav class="row navigation">
      <ul>
        <li>
            <a href="http://output.jsbin.com/rebokab">Home</a>
        </li>

        <li>
            <a href="">Input</a>

              <ul>
                <li>
                <a href="http://output.jsbin.com/salizoc">Add Business</a>
                </li>
                <li>
                  <a href="http://output.jsbin.com/zevejok">Add Category</a>
                </li>

                <li>
                  <a href="http://output.jsbin.com/gijumus">Add Transaction</a>
                </li>               
             </ul>
        </li>

        <li><a href="#">Output</a>
          <ul>
                <li><a href="#">Output 1</a></li>
                <li><a href="#">output 2</a></li>
                <li><a href="#">Output 3</a></li>

         </ul>
        </li>
      </ul>
    </nav>



<!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header">
        <div class="container">
        `enter code here`    <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Database Technologies</h1>
                        <hr class="small">
                      <span class="subheading">Expense Database</span> 
                    </div>
                </div>
            </div>
        </div>
  </header>


  <div class="Course">
  <h1>Course Information</h1>
  <p>Database Technologies</p>
  <p>Semester: Spring 2017</p>
  <h3>Group Information</h3>
  <p>Nish Patel, Netid: njp98</p>
  <p>Jason Ma, Netid: jcm322 </p>
  <p>Jonathan, Chandy Netid: jc1518</p>
  </div>

  <div class="PD">
  <h2>Project Description</h2>

  <p>
    Creating an Expense Database to allow an individuals 
     to track their consumer purchasing history in a manner 
     that reports may be generated and analysis may be performed.
  </p>
  </div>   


  <div class="ERD">          
  <h2>ERD Diagram</h2>
  <p>Click on the link to view ERD diagram,
    <a href="http://i66.tinypic.com/t54mqs.jpg">ERD Diagram</a>

    </p>
  </div>

  <div class="LINKS">
    <h2>Description of Links</h2>
    <h3>Input</h3>
    <p>The input page will allow users to add a business transaction. For example users may eneter a businesses information, such as name,address,phone number,
       etc. also what type of store is it(food,retail,gas,etc.)</p>
    <h3>Output</h3>
    <p>The output page will allow users to search for a certain business or category of businesses. Also will allow user to search for customer information.</p>
    <h3>Mix</h3>
    <p>This page is a mix of both input and outpages in which users can enter information into the databse and also get results of the database.</p>
  </div>

<footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <p class="copyright text-muted">Copyright &copy; Database Technologies 2017</p>
                    <p class="copyright text-muted">Nish Patel | Jason Ma | Jonathan Chandy</p>
                </div>
            </div>
        </div>
    </footer>    

<script src="http://static.jsbin.com/js/render/edit.js?3.41.10"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-1656750-34', 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');

    </script>

    </body>
    </html>

变化:

<li><a href="#">Add Business</a></li>

<li><a href="http://output.jsbin.com/salizoc">Add Business</a></li>

以及类似这样的其他链接...

body {
    background-color: White;
    }


    .intro-header{
    background-image: 
    url('http://www.corporatelivewire.com/images/deals/1320/2021321577.jpg')

    }


    .site-heading{
    color:white; 
    font-weight:bold;
    font-family:copperplate;
    text-align: center;

    }




    .subheading{
    color:white;
    font-size:30px; 
    font-weight:bold;
    font-family:copperplate;
    text-align:center;
    }


    .Course{
    text-align: center;
    }

    .PD{
    text-align: center;
    }

    .ERD{
    text-align: center;
    }

    .LINKS{
    text-align: center;
    }

    p{
    font-weight:bold;
    }
    .container{
    text-align: center;
    }

    .navigation {
    background: blue;
    }

    .navigation ul {
    float: left;
    list-style: none;
    }

    .navigation ul a {
    color: black;
    text-decoration: none;
    font-weight: bold;
  font-size: 18px;
  padding: 0 15px;
  line-height: 32px;
}

.navigation ul li {
  float: left;
  position: relative; /* optional but safe */
}

.navigation ul li:hover {
  background: #666;
}

.navigation ul li:hover a {
  color: #ddd;
  text-decoration: underline;
}

.navigation ul ul {
  position: absolute;
  background: #000;
  display: none;
}

.navigation ul ul li {
  float: none;  /* optional but safe */
  width: 250px;
}

.navigation ul li:hover > ul {
  display: block;
}

.navigation ul ul ul {
  display:none;
  left: 100%;
  background: #333;
  top: 0
}

@media screen and (max-width: 780px) {

  .navigation ul li {
    float: none;
  }

  .navigation ul ul {
    z-index: 1
  }

  .navigation ul ul ul {
    left: 25%;
    top: 100%;
    /* width: 200px; */
  }

}
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <!--
    Created using JS Bin
    http://jsbin.com

    Copyright (c) 2017 by njp98 (http://jsbin.com/rebokab/25/edit)

    Released under the MIT license: http://jsbin.mit-license.org
    -->
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width">
    <title>Homepage</title>
</head>
<body>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


  <!-- Navigation -->
   <nav class="row navigation">
      <ul>
        <li>
            <a href="http://output.jsbin.com/rebokab">Home</a>
        </li>

        <li>
            <a href="">Input</a>

              <ul>
                <li>
                <a href="http://output.jsbin.com/salizoc">Add Business</a>
                </li>
                <li>
                  <a href="http://output.jsbin.com/zevejok">Add Category</a>
                </li>

                <li>
                  <a href="http://output.jsbin.com/gijumus">Add Transaction</a>
                </li>               
             </ul>
        </li>

        <li><a href="#">Output</a>
          <ul>
                <li><a href="#">Output 1</a></li>
                <li><a href="#">output 2</a></li>
                <li><a href="#">Output 3</a></li>

         </ul>
        </li>
      </ul>
    </nav>



<!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header">
        <div class="container">
        `enter code here`    <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Database Technologies</h1>
                        <hr class="small">
                      <span class="subheading">Expense Database</span> 
                    </div>
                </div>
            </div>
        </div>
  </header>


  <div class="Course">
  <h1>Course Information</h1>
  <p>Database Technologies</p>
  <p>Semester: Spring 2017</p>
  <h3>Group Information</h3>
  <p>Nish Patel, Netid: njp98</p>
  <p>Jason Ma, Netid: jcm322 </p>
  <p>Jonathan, Chandy Netid: jc1518</p>
  </div>

  <div class="PD">
  <h2>Project Description</h2>

  <p>
    Creating an Expense Database to allow an individuals 
     to track their consumer purchasing history in a manner 
     that reports may be generated and analysis may be performed.
  </p>
  </div>   


  <div class="ERD">          
  <h2>ERD Diagram</h2>
  <p>Click on the link to view ERD diagram,
    <a href="http://i66.tinypic.com/t54mqs.jpg">ERD Diagram</a>

    </p>
  </div>

  <div class="LINKS">
    <h2>Description of Links</h2>
    <h3>Input</h3>
    <p>The input page will allow users to add a business transaction. For example users may eneter a businesses information, such as name,address,phone number,
       etc. also what type of store is it(food,retail,gas,etc.)</p>
    <h3>Output</h3>
    <p>The output page will allow users to search for a certain business or category of businesses. Also will allow user to search for customer information.</p>
    <h3>Mix</h3>
    <p>This page is a mix of both input and outpages in which users can enter information into the databse and also get results of the database.</p>
  </div>

<footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <p class="copyright text-muted">Copyright &copy; Database Technologies 2017</p>
                    <p class="copyright text-muted">Nish Patel | Jason Ma | Jonathan Chandy</p>
                </div>
            </div>
        </div>
    </footer>    

<script src="http://static.jsbin.com/js/render/edit.js?3.41.10"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-1656750-34', 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');

    </script>

    </body>
    </html>

我看过你的网站..它正在运行..但问题是..你的 add_category 页面和 add_business 页面链接设置不正确。从您的主页可以访问每个页面,但从其他页面无法访问,因此请确保在其他页面上添加了正确的链接,指向您从那里重定向的每个其他页面。