0
도와주세요! 이 프로젝트는 직업입니다. 크롬과 사파리에서 제대로 표시되는 탐색 메뉴를 만들었습니다. 다른 필수 브라우저는 Firefox이지만 탐색 메뉴는 전혀 표시되지 않습니다.Nav 메뉴가 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>© 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;
}
내가 두 NAVS 그 중 하나가 잘 작동하고 있습니다
여기 내 코드입니다. 누구든지이 문제를 해결하는 방법을 알고 있습니까?
죄송합니다. 나는이 글을 코멘트에 게시하지 않았지만, 포럼에 처음 왔기 때문에 나는 분명히 질문에 대해 논평 할만큼 충분한 평판을 얻지 못했습니다. – Turtleweezard
CSS를 게시했습니다. 죄송합니다. – user1559665
하하! 글쎄, 내 파이어 폭스에 문제가 될 수 있다고 생각하지만 그것은 # 메뉴 하나가 나타나지 않는거야. #login이 잘 나타나서 파이어 폭스가 HTML5를 실행하는 데 전혀 문제가 없다고 생각하게 만든다. (분명히) # 메뉴를 배열 한 방법을 좋아하지 않는다. Firefox가 최신 버전인지 확인하고 어떤 일이 발생하는지 확인하겠습니다. – user1559665