Drop down menu 下拉子菜单消失，正在工作，现在不工作
我有一个水平导航栏，导航栏中的第一个链接“products”有一个垂直下拉菜单。不久前，当我在这个网站上添加更多内容时，“产品”的子菜单消失了，我不知道如何让它再次工作，或者为什么它一开始就停止工作了 有什么想法吗 这是我的密码： （html部分在div id“navigation”中的li类“products”中，子菜单的css部分在我注释“/products menu/”的地方。我把所有的代码都放在这里，因为错误是在我添加了更多代码后才发生的，它以前是可以工作的。因此，我可能在其他部分也有错误，这会阻止子菜单工作，但我不确定。） html:Drop down menu 下拉子菜单消失，正在工作，现在不工作,drop-down-menu,submenu,Drop Down Menu,Submenu,我有一个水平导航栏，导航栏中的第一个链接“products”有一个垂直下拉菜单。不久前，当我在这个网站上添加更多内容时，“产品”的子菜单消失了，我不知道如何让它再次工作，或者为什么它一开始就停止工作了 有什么想法吗 这是我的密码： （html部分在div id“navigation”中的li类“products”中，子菜单的css部分在我注释“/products menu/”的地方。我把所有的代码都放在这里，因为错误是在我添加了更多代码后才发生的，它以前是可以工作的。因此，我可能在其他部分也有错
你能设置一个JSFIDLE来演示这个问题吗？对不起，太早按enter键了。如果没有这些图像，很难理解所有的东西是什么，但是出于某种原因，它在JSFIDLE中工作，但当我在浏览器（任何浏览器）中测试我的代码时就不工作了，所以不确定为什么它在JSFIDLE中不工作？刚刚意识到问题来自何处，我将子菜单向上移动了几个像素，看到它只位于导航栏的高度，下面的所有内容都被切断了。有人知道为什么会这样吗？
<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>
@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;
}