0

我有一个水平导航栏，导航栏中“产品”中的第一个链接有一个垂直下拉菜单。不久前这是有效的，然后当我今天向该网站添加更多内容时，“产品”的子菜单消失了，我不知道如何让它再次工作或为什么它首先停止工作。

有任何想法吗？？

这是我的代码：

（html部分在div id“navigation”中的li class“products”中，子菜单的css部分是我评论“/ products menu /”的地方。我把所有代码都放在这里作为错误仅在我添加更多代码后才发生，它之前工作过。所以也许我在其他部分也有错误，这导致子菜单无法工作，但不确定。）

html:

<body>



    <div id="wrapperContainer">


        <div id ="container">

            <!-- header -->
           <div id = "header">

                 <!-- logo -->
                <div id = "logo">
                    <a href="*"><img src = "images/TelefunkenLogo.png" width="132" height="20"/> </a>
                </div>
                <!-- close logo -->

                 <!-- contact/languages/flag -->
                <div id = "rightHeader">
                    <ul>
                    <li><a href="#">CONTACT</a></li>
                    <li onclick="location.href='#languageContainer';"><a href ="#" >SELECT COUNTRY</a></li>
                    <li class = "flag"><img src = "images/germany.png"/></li>
                    </ul>
                </div>  
                <!-- close contact/languages/flag -->

           </div>
            <!-- close header -->

           <!-- drop down language options -->
           <div class="languageContainer">

                <!-- left options-->
                <div id="leftLanguageContainer">
                    <ul>
                        <li><a href="#"><img src = "images/england.png"/>INTERNATIONAL - English</a></li>
                        <li><a id="selectCountry" href="#"><img src = "images/germany.png"/>DEUTSCHLAND - Deutsch</a></li>
                    </ul>   
                </div>
                <!-- close left options-->

                <!-- cross -->
                <a class="closeCross" title="Close" href="#">
                    <span></span>
                </a>
                <!-- close cross -->
            </div>
            <!-- close drop down language options -->

            <!-- navigation -->

            <div id="navigation">
                <!-- menu items -->
                <ul class="menu">
                    <li class="home"><a href="#"><img src="images/homeButton.png" alt="Telefunken"/></a></li>

                    <li class="products" ><a href="#">PRODUCTS</a>
                        <ul class="subMenu">
                            <li><a href="#"><img src="images/product1.jpg" alt="Telefunken"/></a><a href="#">some text</a></li>
                            <li><a href="#"><img src="images/product2.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product3.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product4.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product5.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product6.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product7.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product8.jpg" alt="Telefunken"/></a></li>
                            <li><a href="#"><img src="images/product9.jpg" alt="Telefunken"/></a></li>
                        </ul>
                     </li>
                    <li class="company"><a href="#">COMPANY</a></li>
                    <li class="service"><a href="#">SERVICE</a></li>
                    <li class="news"><a href="#">NEWS</a></li>
                </ul> 
                <!-- close menu items -->

                <!-- search function -->
                <div id="searchWrapper">
                    <div id="search">
                        <form action="searchresult/" method="post" onsubmit="return searchAction(this)">

                            <input type="text" name="tx_indexedsearch[sword]" value>
                            <input type="hidden" id="searchProductUrl" name="searchProductURL" value="searchresultproducts/">
                            <select name="page"id="selectPage">
                                <option value="1">WEBSITE</option>
                                <option value="2">PRODUCTS</option>
                            </select>

                        <div id="submitButton">
                        <input type="submit" value class ="btnSubmit">
                        </div>
                    </form>
                    </div>
                </div>
                <!-- close search function -->

             </div>
            <!-- close navigation -->

            </div>
            <!-- close container -->

            <div class="slider" >               
                <img src="images/sliderBkg.jpg" alt="alt text" width="100%" />
                <div id="sliderImages">
                    <img class="img" style="width:983.5px; margin: 0 auto" src="images/sliderLEDTV.jpg">
                    <!--<img class="img" style="width:983.5px" src="images/sliderCamcorder.jpg">
                    <img class="img" style="width:983.5px" src="images/sliderSystemPa.jpg">-->
                </div>
            </div>

            <!-- slider 

            <div class="slider" style="width:100%;">               
                <img class="img" style="width:983.5px" src="images/sliderLEDTV.jpg">
            </div>-->
                 <!--<img class="img"src="images/sliderLEDTV.jpg">
                 <img class="img"src="images/sliderCamcorder.jpg">
                 <img class="img"src="images/sliderSystemPa.jpg">-->

            <!-- close slider -->


           <!-- lower content -->
           <div id="lowerContent">

                <div id="leftContent">
                    <h1>RECENT PRODUCTS</h1>

                    <div class="inline"><div id ="product1">
                        <a href="#"><img src="images/recentProducts1.jpg"></a>
                        <h2>PORTABLE </br>STEREO RDS RADIO</h2>
                        <p>Some Text.</p>
                        <a href="#"><span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span> </a>
                    </div></div>

                    <div class="inline"><div id ="product2">
                        <a href="#"><img src="images/recentProducts2.jpg"></a>
                        <h2>ICONCERTO </br>I-POD PLAYER</h2>
                        <p>Some Text.</p>
                        <a href="#"><span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span> </a>
                    </div></div>

                    <div class="inline"><div id ="product3">
                        <a href="#"><img src="images/recentProducts3.jpg"></a>
                        <h2>T9HD </br>42" (106 CM) LOREM</h2>
                        <p>Some Text.</p>
                        <a href="#"><span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span> </a>
                    </div></div>


                </div>

                <div id="rightContent">
                </div>

           </div>


           <!-- close lower content -->


           <!-- footer -->
           <div id="footer">

           </div>
           <!-- footer -->

     </div>


</body>

CSS：

@charset "utf-8";
/* CSS Document */

/*all content sits in here*/
#wrapperContainer {
    width:100%; 
}

#container {
    width:983.5px;
    margin:0px auto;
}

h1 {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 1em;
    color:#7f7f7f;
}

h2 {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color:#000000;
}

p {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 0.7em;
    color:#666666;
}

a:link {
    text-decoration:none;   
}

a:visited{
    text-decoration:none;   
}

a:hover{
    color:#d34242;  

}

/*header*/
#header {
    margin: 0 auto;
    padding: 20px 0 0px 0;
    height: 60px;
    width: 983px;
}

/*logo in header*/
#logo {
    float: left;
}

/*links to the right of the header*/
#rightHeader {
    float: right;
}

/*styling the header links*/
#rightHeader li {
    display: inline;
    list-style-type: none;
    padding: 5px;
    border-right:1px solid #dbdbdb;
    padding-right:10px;

}

#rightHeader li a:link {
    text-decoration: none;
    font-size: 12px;;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #b2b2b2;
}


#rightHeader li a:visited {
    text-decoration: none;
    text-size: 0.01em;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #b2b2b2;
}

a.selectCountry:hover + .languageContainer {
    visibility: visible;    
}


#rightHeader li a:hover {
    text-decoration: none;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #cc0000;
}

/*this is meant to display the language options when you click on 'select country'*/
.languageContainer {
    cursor:pointer;
    margin: 0 auto;
    position:relative;
    display:none;
    padding: 20px 0 0px 0;
    width: 983px;
    height: 70px;
    border:1px solid #b2b2b2;
} 

/*language options*/
#leftLanguageContainer li {
    display: inline;
    float: left;
    padding:30px;
    margin-left:-40px;
    padding-top:0px;
}

/*language options styling*/
#leftLanguageContainer li a:link {
    text-decoration: none;
    font-size: 9px;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #b2b2b2; 
}

#leftLanguageContainer li a:visited {
    text-decoration: none;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #b2b2b2;
}

#leftLanguageContainer li a:hover {
    text-decoration: none;
    font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    color: #cc0000; 
}

/*cross in the language container*/
a.closeCross {
    background-image:url('images/closeCross.png');
    display:block;
    width:30px;
    height:30px;
    margin-top:-36px;
    float:right;
    overflow: hidden;
    text-decoration:none;
}

a.closeCross:hover {
    background-image:url('images/closeCrossHover.png');
}

/*main navigation*/
#navigation {
    background-image:url(images/menuBkg.png);   
    background-repeat: no-repeat;
    height:40px;
    width:103%;
    z-index:999;
    position:absolute;
    overflow:hidden;
}

/*setting height of the menu*/
.menu {
    height:40px;    
}

/*styling the home button*/
.menu li.home {
    display:inline; 
    position:relative;
    left:-40px;
    top:-25px;
    height:43px;
    width:40px;
    padding:0px;
}

/*products menu*/


.menu li ul.subMenu {
    margin:0px;
    display:none;
    padding:0px;
    background:#FFFFFF;
    width:985px;
    top:40px;
    height:250px;
}


.menu li:hover ul.subMenu {
    display:block;
    width:970px;
}


.menu li li {
    list-style:none;
    display:list-item;
    width:100%;
    top:0px;
    left:10px;
    line-height:2px;
    background:#FFFFFF;
}


.menu ul.subMenu li {
    display:inline;
    list-style:none;
    position:relative;
}


.menu li ul.subMenu {
    margin:0px;
    padding:0px;
    display:none;
    position:absolute;
}


/* trying to set a width to each 'li' in the subMenu to get the text to move below the image
.menu li ul.subMenu li {
    width:10px;

}*/


.subMenu a:hover {
    color:#603;
    /*border properties*/   
}

/*end products menu*/

/*styling individual menu links*/
.products {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #c9c9c9;

}

.products:hover {
    background-image:url(images/pressed2.jpg);
    background-repeat: no-repeat;
    top:-40px;
    background-size: 120px 40px;
    font-color: #FFFFFF;
    color: #FFFFFF; 
}

.company {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #c9c9c9; 
    width:120px;
}


.company:hover {
    background-image:url(images/pressed2.jpg);
    background-repeat: no-repeat;
    top:-40px;
    background-size: 120px 40px;
    font-color: #FFFFFF;
    color: #FFFFFF; 
}

.service {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #c9c9c9; 
    margin-left:-4px;
}


.service:hover {
    background-image:url(images/pressed2.jpg);
    background-repeat: no-repeat;
    top:-40px;
    background-size: 120px 40px;
    font-color: #FFFFFF;
    color: #FFFFFF; 
}

.news {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #c9c9c9;
    margin-left:-4px;   
}


.news:hover {
    background-image:url(images/pressed2.jpg);
    background-repeat: no-repeat;
    top:-40px;
    background-size: 120px 40px;
    font-color: #FFFFFF;
    color: #FFFFFF; 
}

/*all menu links in navigation bar*/
.menu li {
    display:inline; 
    position:relative;
    bottom:45px;
    right:50px;
    width:130px;
    height:43px;
    padding:15px;

}


.menu li a:link {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
    font-size:0.8em;
    width:120px;
    height:43px;
    text-decoration:none;
    color: #000000; 
}


.menu li a:visited {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
    font-size:0.8em;
    width:120px;
    height:43px;
    text-decoration:none;
    color: #000000; 
}


.menu li a:hover {
    font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
    font-size:0.8em;
    text-decoration:none;
    color: #FFFFFF;
}

/*search bar in navigation*/
#searchWrapper {
    height:100px;
    left:212px;
    /*float:right;*/
    position:relative;
}


#search{
    left:80px;
    top:70px;   
}

/*puts everything in the menu on the same line. */
.menu, #searchWrapper, #search, #submitButton {
    display: inline-block;
    vertical-align: top;    
}


#submitButton {
    z-index:1;  
}


.btnSubmit {
    border:0;
    width:40px;
    height: 40px;
    top:10px;
    background-image:url(images/rightArrow.jpg);    
}


.btnSubmit:hover {
    background-image:url(images/rightArrowPressed.jpg); 
}
/*style slideshow*/
.slider {
    height: 420px;
    overflow:hidden;

}   

#sliderImages {


}


/*#slideshow, #navigation {
    display: inline-block;
    vertical-align: top;
}

#slideshow {
    margin-top:-40px;   
    margin-left: -30px;
}*/

#lowerContent{
    margin: 0 auto;
    padding: 0px 0 0px 0;
    width: 983px;   
}

#leftContent {
    padding-left:10px;
    width:750px;
    display:inline;
}

.inline {
    float: left;    
}

#product1 {
    width:240px;
    border-right: 1px solid #dbdbdb;
}

#product2 {
    width:240px;
    padding-left:40px;
    border-right: 1px solid #dbdbdb;
}

#product3 {
    width:240px;
    padding-left:40px;
    border-right: 1px solid #dbdbdb;
}
4

0 回答 0