Question

我正在为我的家族企业创建一个网站，我试图让一个下拉菜单正常工作。我正在尝试将“工厂列表”项目链接到“工厂列表简介”页面，然后我希望它下拉并显示我希望它链接到的其他页面。

我在使用扩展程序之前设法让它工作，但即使我在扩展程序上编辑模板，它也会影响我对网页的设计。

以下是我正在处理的某个网页的代码。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Hocklynn Index</title>
    <meta name="author" content="Ralph Phillips">
    <script src="../css/stylesheet.js" type="text/javascript"></script>
<style type="text/css">
@import url("../css/stylesheet.css");
</style>
</head>
<body>
<div class="header">
    <div class="wrapper">
        <img src="../images/Hocklynn Logo/Hocklynn-Logo-High-Rez.png" width="351" height="91" alt="" class="header-logo" />
        <div class="header-meta">
            <p>Tel: 0117 951 7572</p>
            <p>Fax: 0117 951 601</p>
            <p>Email: info@hocklynn.co.uk</p>
        </div>
     </div>
</div>
<div class="AJXCSSMenufBJaaQC">
   <!-- AJXFILE:../css/stylesheet.css -->
     <ul class="wrapper">
        <li><a href="index.html">Home</a></li>
        <li><a href="About.html">About&nbsp;Us</a></li>
        <li><a class="ajxsub" href="Plant List Intro.html">Plant&nbsp;List</a>
        <ul>
          <li><a href="Plant%20List%20Laser.html">Laser</a></li>
            <li><a href="Plant%20List%20Press%20Brake.html">Press Brake</a></li>
            <li><a href="#">Welding</a></li>
            <li><a href="Plant%20List%20-%20Other.html">Other Plant</a></li>
         </ul>
         </li>
         <li><a href="Products.html">Products</a></li>
         <li><a href="CAD%20Facilities.html">CAD&nbsp;Facilities</a></li>
         <li><a href="contact.html">Contact&nbsp;Us</a></li>
    </ul>
</div>

<div class="wrapper">
    <div class="content">
      <img src="../images/Sheet Metal Fabrication.jpg" class="max-width" />
    </div>
</div>

</body>
</html>

这是我的CSS代码

  @charset "utf-8";
/*
 Ajatix Advanced CSS Drop Down Menu Light
 Copyright (C) 2009-2014 Ajatix. All rights reserved.
 http://www.ajatix.com
*/

body {
    font-family: "Verdana", "Helvetica", sans-serif;
    line-height: 1.2;
}

.header {
    overflow: hidden;
    background-color: #E0E0E0;
}

.wrapper {
    overflow: hidden;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.header-logo {
    float: left;
}

.header-meta {
    float: right;
    color: #2D3C73;
    line-height: 0.5em;
    font-weight:bold;
    width:300px;
}

.content {
    overflow: hidden;
    margin-top: 50px;
}

.content img {
    float: left;
    margin-right: 20px;
    margin-bottom:20px;
    width: auto;
    border: 1px solid #CECECE;
    padding:5px;
}

.max-width {
    width: 100% !important;
}

.AJXCSSMenufBJaaQC {position:relative;z-index:100;line-height:0;background:#2e6fa9 url(stylesheet_files/menu-bg.gif) top right;text-align:center;}
.AJXCSSMenufBJaaQC ul {position:relative;display:inline-block;margin:0;padding:0px 0px 0px 0px;list-style-type:none; margin-left:auto; margin-right: auto;}
*+html .AJXCSSMenufBJaaQC ul {display:inline;}
.AJXCSSMenufBJaaQC li {float:left;margin:0; padding: 0 40px;}
.AJXCSSMenufBJaaQC li:hover,.AJXCSSMenufBJaaQC li.ajxover {position:relative;}
.AJXCSSMenufBJaaQC a,.AJXCSSMenufBJaaQC_n a {display:block;overflow:hidden;}
.AJXCSSMenufBJaaQC>ul>li>a {width:auto;height:41px;white-space:nowrap;padding:0 12px 0 12px;font:bold 12px Arial,Helvetica,sans-serif;line-height:41px;text-decoration:none;text-transform:none;text-align:center;border:0;color:#cae3f8;background:url(stylesheet_files/top.gif) top right;}
.AJXCSSMenufBJaaQC>ul>li:hover>a,.AJXCSSMenufBJaaQC>ul>li.ajxover>a {color:#ffffff;background:#5597d1 url(stylesheet_files/top.gif) bottom right;}
.AJXCSSMenufBJaaQC>ul>li>a.ajxsub {padding:0 26px 0 12px;background:url(stylesheet_files/top-sub.gif) top right;}
.AJXCSSMenufBJaaQC>ul>li:hover>a.ajxsub,.AJXCSSMenufBJaaQC>ul>li.ajxover>a.ajxsub {position: static;background:#5597d1 url(stylesheet_files/top-sub.gif) bottom right;}
.AJXCSSMenufBJaaQC li ul {position:absolute;left:-9999px;top:-9999px;width:200px;height:auto;display:inline-block;vertical-align:top;font-size:0;float:none;padding:0px 0px 0px 0px;border:1px solid #ffffff;background:#5597d1;}
.AJXCSSMenufBJaaQC li:hover > ul,.AJXCSSMenufBJaaQC li.ajxover > ul {left:-1px;top:41px;}
.AJXCSSMenufBJaaQC li li {width:200px;margin:0;}
.AJXCSSMenufBJaaQC li li a {width:176px;height:auto;white-space:normal;padding:9px 12px 9px 12px;font:12px Arial,Helvetica,sans-serif;line-height:12px;text-decoration:none;text-transform:none;text-align:left;border:0;color:#ffffff;background:none;}
.AJXCSSMenufBJaaQC li li:hover>a,.AJXCSSMenufBJaaQC li li.ajxover>a {background:#2d6fa9;}
.wrapper {
}

这是我的代码fiddle。

Answer 1

不要将脚本src作为src =＆＃34; ../ css / stylesheet.js＆＃34;并在导入url＆＃34; ../"

给出文件所在的确切路径名称i，e src =＆＃34; http：//projectfolder/yourcssfolder/filename.js"

Answer 2

我同意黑豹评论。我想建立一个下拉菜单最常用的方法是你提供的html-markup，它隐藏了css的子菜单列表，看起来有点像这样：

.ajxsub ul { display: none; }

在相应的.js文件中，可能会有一些像

这样的切换

$(".ajxsub").click(function () {
    $( ".ajxsub ul" ).toggle();
});

请注意我在这里使用jQuery。你需要在你的html文件中实现jQuery;）

另外：我只是在没有测试的情况下快速写下来（由于时间不够......）这只是解决问题的方向之一，而且还有很多方法。

下拉菜单不起作用

2 个答案: