저는 프로그래밍 초보자인데, 이제 html5와 css로 사이트를 만드는 임무를 맡고 있습니다.
나는 수직 하위 메뉴가있는 수평 메뉴 막대가 있습니다.
3 개의 주요 탭 홈, 건강, 안전
그 아래에는 하위 메뉴가 있습니다
모든 주 메뉴를 클릭하면 제대로 작동합니다 .
하지만 홈 클릭시-건강-건강 하위 메뉴 (잘 작동 함)-안전 하위 메뉴 (잘 작동하지 않음)
이것은 건강 직후에 화재 위험을 클릭 할 때 발생하는 오류입니다. 웹 주소에 대한 웹 페이지가 없습니다 : http : // file : /// C : /Users/DELL/Desktop/a/health/safety/fire_hazards.html
위에 표시된 웹 주소가 올바르지 않습니다. 나는 건강-안전-화재 위험 폴더가 아닌 안전-화재 위험 폴더에 화재 위험을 보관했습니다.
경로가 왜 잘못 표시되고 있습니까?
<div id="menu"> <!--starts of menu-->
<ul >
<li><a href="index1.html" class="current">Home</a></li>
<li><a href="health.html">Health</a>
<ul>
<li><a href="health/personal_hygiene.html">Personal Hygiene</a>`enter </li>
<li><a href="health/food_hygiene.html">Food Hygeiene</a></li>
</ul>
</li>
<li><a href="safety.html">Safety</a>
<ul>
<li><a href="safety/fire_hazards.html">Fire Hazards</a></li>
<li><a href="safety/cooking_gas.html">Cooking Gas</a></li>
</ul>
</li>
</ul>
</div><!--end of menu-->
CSS
#menu {
display:block;
position:relative;
width: 960px;
height: 50px;
background-color: #fff;
margin: 0px auto;
border:1px solid #000;
}
#menu ul li a:hover{
color:#c1d82f;
}
#menu ul .current {
color: #b13932;
}
#menu li:hover ul{
display:block;
}
#menu ul {
margin: 0px;
padding: 4px 0px;
}
#menu li {
float:left;
position:relative;
list-style-type:none;
}
#menu li a {
display: block;
padding:10px 45px;
}
#menu ul :after{
content:".";
height:0px;
clear:both;
visibility:hidden;
}
#menu ul ul{
position:absolute;
left:0px;
display:none;
}
#menu ul ul li {
width:100%;
}
#menu ul ul li a{
border-right:none;
padding:5px 5px;
}
/* end of menu */
}
이 코드를 시도해 볼 수도 있습니다.
#menu {
width:100%;
position:relative;
background:#ccc;
}
nav {
position:relative;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
position:relative;
}
nav ul li a {
font:bold 12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#333;
padding:7px 10px;
display:inline-block;
text-decoration:none;
}
nav ul li:hover > a {
text-decoration:none;
color:#005ba0;
}
nav ul li a.current {
background:#005ba0;
color:#fff;
}
nav ul ul {
min-width:200px;
position:absolute;
top:100%;
z-index:666;
background:#eee;
display:none;
}
nav li:hover > ul {
display:block;
}
nav ul ul ul {
left:100%;
top:0;
}
nav ul ul li {
display:block;
width:100%;
}
nav ul ul a {
padding:7px 10px;
display:block;
color:#777;
border-bottom:1px solid #ddd;
text-align:left;
}
nav ul ul a:hover {
background:#ddd;
}
nav ul ul a.current {
background:#dddd;
color:#005ba0;
}<div id="menu">
<nav>
<ul>
<li><a href="index1.html" class="current">Home</a></li>
<li><a href="health.html">Health</a>
<ul>
<li><a href="health/personal_hygiene.html">Personal Hygiene`enter</a></li>
<li><a href="health/food_hygiene.html">Food Hygeiene</a></li>
</ul>
</li>
<li><a href="safety.html">Safety</a>
<ul>
<li><a href="safety/fire_hazards.html">Fire Hazards</a></li>
<li><a href="safety/cooking_gas.html">Cooking Gas</a></li>
</ul>
</li>
</ul>
</nav>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다