Question

请帮忙！这个项目是为了一份工作。我已经构建了一个在Chrome和Safari中显示的导航菜单，其他所需的浏览器是Firefox，但导航菜单根本没有显示。

这是我的代码：

<body>  
    <div class="main">
        <header>
            <a href="index.html"><div id="logo"></div></a>
            <nav id="login">
                <li><a href="#">Register</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Help</a></li>
            </nav>
            <div class="clear"></div>
            <nav id="menu">
                <li><a href="household.html">Household</a></li>
                <li><a href="toys.html">Toys</a></li>
                <li><a href="pets.html">Pets</a></li>
                <li><a href="music.html">Music</a></li>
                <li><a href="electronics.html">Electronics</a></li>
            </nav>
            <!-- Slider -->
            <div class="slider-wrapper">
                <div id="slider" class="nivoSlider">
                    <img src="images/image1.jpg" alt="PS4">
                    <img src="images/image2.jpg" alt="PS4">
                    <img src="images/image3.jpg" alt="PS4">
                </div>
            </div>
            <script type="text/javascript">
                $(window).load(function() {
                    $('#slider').nivoSlider();
                });
            </script>
            <!-- Slider -->
        </header>   
        <section class="content">
            <h1>Household</h1>
            <section id="iowbg">
                <img id="iowimage" src="./images/iow_lamp_2.jpg">
                <div class="productname"><h2>Ikea Orgel Vreten Floor Lamp, Natural, Steel</h2></div>
                <div class="productdesc"><h5>Shade of handmade paper, each shade is unique. Gives a soft mood light.</h5></div>
                <div class="productprice"><h2 style="color: #900;">$19.99</h2></div>
            </section>
            <div class="clear"></div>
            <section id="discounts">
                <h2>Discounted Items</h2>
                <figure id="discountsitem">
                    <img id="discountsimage" src="./images/discount_01.jpg" alt="">
                    <figcaption class="discountdesc">
                        Office Star 4-Foot Resin Multipurpose Table, Light Grey
                    </figcaption>
                    <figcaption class="regularprice">
                        $49.99
                    </figcaption>
                    <figcaption class="discountprice">
                        $39.99
                    </figcaption>
                </figure>
                <figure id="discountsitem">
                    <img id="discountsimage" src="./images/discount_02.jpg" alt="">
                    <figcaption class="discountdesc">
                        Aquarius Aq15005 Aquarius 5 Rounded 5-Gallon Aquarium Kit
                    </figcaption>
                    <figcaption class="regularprice">
                        $29.99
                    </figcaption>
                    <figcaption class="discountprice">
                        $19.99
                    </figcaption>
                </figure>
                <figure id="discountsitem"> 
                    <img id="discountsimage" src="./images/discount_03.jpg" alt="">
                    <figcaption class="discountdesc">
                        Intex Pull-out Sofa
                    </figcaption>
                        <figcaption class="regularprice">
                            $54.99
                        </figcaption>
                        <figcaption class="discountprice">
                            $44.99
                    </figcaption>
                </figure>
                <div class="clear"></div>
            </section>
        </section>
        <footer>
            <a href="household.html"><img class="imageset" src="images/01_household.jpg"></a>
            <a href="toys.html"><img class="imageset" src="images/02_toys.jpg"></a>
            <a href="pets.html"><img class="imageset" src="images/03_pets.jpg"></a>
            <a href="music.html"><img class="imageset" src="images/04_music.jpg"></a>
            <a href="electronics.html"><img class="imageset" src="images/05_electronics.jpg"></a>
            <form id="contact">
                <h1>Contact Us</h1>
                <label id="firstName" class="label">First Name: </label>
                <input type="text" class="TextInput" value="Your First Name"></label><br>
                <label id="lastName" class="label">Last Name: </label>
                <input type="text" class="TextInput" value="Your Last Name"></label><br>
                <label id="userEmail" class="label">Your Email: </label>
                <input type="email" class="EmailInput" value="Your Email Address"><br>
                <input type="submit" class="button" value="Submit">                 
            </form>
            <div class="clear"></div>
        </footer>
        <small>&copy; 2013, Our Stuff Is Cheap But Good Co. | All Rights Reserved</small>
    </div>
</body>

CSS

* {
font-family: Helvetica, Arial, sans-serif;
color: #404040;
}
a {
color: #404040;
text-decoration: none;
transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
.sectionheader {
color: #1046a9;
}
p {
font-size: 12px;
}
.content {
padding: 20px 0 20px 0;
}
a:hover {
color: #5bbb15;
text-decoration: none;
transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
}
body {
background-image: url('../images/body_bg.png');
background-repeat: repeat;
}
.main {
margin: auto;
padding: 20px 0 10px 0;
width: 960px;
}
#logo {
background-image: url('../images/logo_3.png');
float: left;
height: 100px;
width: 148px;
margin-bottom: -43px;
}
#login {
float: right;
font-size: 12px;
list-style-type: none;
text-align: right;
}
#login li {
display: inline;
padding-left: 20px;
}
.clear {
height: 1px;
width: 100%;
}
#menu, #menu ul, #menu li, #menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
#menu {
    height: 40px;
    width: 380px;
float: right;
margin-bottom: 20px; 
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
#menu ul { display: none; }
#menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
#menu li:first-child a { border-left: none; }
#menu li:last-child a{ border-right: none; }
#menu li:hover > a { color: #78fe3f !important; }
#menu ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#menu li:hover > ul { opacity: 1; }
#menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
#menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539;
}
#menu ul li:last-child a { border: none; }
footer { border-bottom: solid 1px #5bbb15; border-top: solid 1px #5bbb15; }
footer small { font-size: 12px;}
#contact {
float: right;
margin: 20px 0 20px 0;
}

label {
font-family: Helvetica, Arial, sans-serif;
color: #404040;
font-size: 14px;
margin: 0;
padding: 0;
text-align: right;
}
.TextInput {
width: 300px;
border-radius: 4px;
margin-left: 10px;
color: #bfbfbf;
}
.EmailInput {
width: 300px;
border-radius: 4px;
margin-left: 10px;
color: #bfbfbf;
}
.button {
width: 308px;
float: right;
}
.imageset {
margin: 30px 4px 0 0;
border: none;
}
#iowbg {
background: #b3b3b3;
width: 920px;
height: 250px;
padding: 20px;
}
#iowimage {
float: left;
position: relative;
}
.productname, .productdesc, .productprice  {
position: relative;
text-align: left;
margin-left: 240px;
margin-bottom: 2px;
}
.productname {
margin-top: 26px;
}
.productprice {
width: 67px;
padding: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
float: left;
position: absolute;
margin-left: 240px;
}
#discountsitem{
float: left;
width: 320px;
margin: auto;
padding: 0;
}
.discountdesc {
width: 200px;
font-size: 12px;
line-height: 14px;
}
.regularprice {
text-decoration: line-through;
color: #900;
float: left;
margin-right: 10px;
}
.discountprice {
color: #5bbb15;
float: left;
}
.productsection {
width: 920px;
padding: 20px;
margin: 20px 0 20px 0 auto;
}

我有两个导航，其中一个正常工作。有谁知道如何解决这个问题？

Answer 1

据我所知，HTML没有明显的错误。它可能是CSS，但是有一个小问题 - 你有点没有发布它。提供它将非常感谢！

编辑：好的，我假设你在问题中引用了两个导航栏是＃login和#menu。我运行HTML（标题中附带的CSS作为样式标记），两个导航栏在Chrome和Firefox中都可以正常显示。我甚至截图，以确保我没有做梦。我会发布屏幕截图，但同样是声誉不足。

我现在唯一的猜测就是你的Firefox出了问题。当然，除非我完全误解了你。然后我会责备你的沟通技巧。：P

导航菜单不显示在Firefox中

1 个答案: