navbar에 대한 드롭 다운 메뉴

내 navbar 드롭 다운 메뉴를 만드는 데 실패했습니다. 모든 CSS 방법으로 원하는 효과를 얻을 수없는 것 같습니다. 현재 내 HTML 보이는 같은 ....navbar에 대한 드롭 다운 메뉴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled</title> 
</head> 

<!-- Reset Sheet --> 
<link href="reset.css" rel="stylesheet" type="text/css"> 
<!-- Main Sheet --> 
<link href="main.css" rel="stylesheet" type="text/css"> 
<!-- Navigation Menu Sheet --> 
<link href="navbar.css" rel="stylesheet" type="text/css"> 

<body> 
<table id="header"> 
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> 

<!-- Table containing logo --> 
<tr> 
<td colspan="2" valign="middle" height="30" align="center"> 
<a href="http://www.phonesrus.com.au"><img src="logo.JPG" alt="logo" width="570" ></a> 
</td></tr> 

<!-- Table containing NavBar --> 
<tr> 
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center"> 
<div class="navbar"> 
<ul class="horizontal">    
    <li><a class="first" href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a></li> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a class="last" href="#">Contact Us</a></li> 
</ul> 
</div> 
</td></tr> 
</table> 

</body> 
</html>

그리고 네비게이션 바에 내 CSS처럼 보이는 것을 칭찬 ...

.navbar ul.horizontal 
{ 
list-style-type:none; 
margin:40 auto; 
width:640px; 
padding:0; 
overflow:hidden; 
} 

.navbar ul.horizontal > li 
{ 
float:left; 
} 

.navbar ul.horizontal li a 
{ 
display: block; 
text-decoration:none; 
text-align:center; 
padding:22px 20px 22px 20px; 
font-family:Arial; 
font-size:8pt; 
font-weight:bold; 
color:#FFFFFF; 
text-transform:uppercase; 
border-right:1px solid #607987; 
background-color:#300000; 
letter-spacing:.08em 
} 

.navbar ul.horizontal li a:hover 
{ 
background-color:#680000; 
color:#a2becf 
} 

.navbar ul.horizontal li a.first 
{ 
border-left:0 
} 

.navbar ul.horizontal li a.last 
{ 
border-right:0 
}

내가이 메뉴를 만드는 것이었다 경우 지점 내 질문은 유사한 스타일 패턴 (예 : 호버 색상 및 배경색)을 따르는 "제품"버튼에 대한 드롭 다운 메뉴가 나머지 탐색 표시 줄에 표시됩니다. 어떻게 이것을 달성하기 위해 CSS로 갈 것인가? 내가 너무 많은 시도와 시도했지만 적절한 결과를 달성하지 못한

<div class="navbar"> 
<ul class="horizontal">    
    <li><a class="first" href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a></li> 
     <ul> 
      <li><a href="#">Apple</a></li> 
      <li><a href="#">HTC</a></li> 
      <li><a href="#">Nokia</a></li> 
      <li><a href="#">Samsung</a></li> 
     </ul> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a class="last" href="#">Contact Us</a></li> 
</ul> 
</div>

질문 존재의 CSS에 대한 새로운 HTML .... 귀하의 도움을 크게 주시면 감사하겠습니다. 감사합니다

출처

2013-08-18 Wishhasad Somawansa

이것이 무슨 뜻인지 확실하지 않습니다. 어쩌면 약간의 스타일 조정이 필요합니다.

문제는 하위 메뉴 목록이 기본 메뉴의 목록 항목 내에 있어야한다는 것입니다. 이처럼 :

.horizontal { 
    list-style-type:none; 
    margin:40 auto; 
    width:640px; 
    padding:0; 
    overflow:hidden; 
} 
.horizontal > li { 
    float:left; 
} 
.horizontal li ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    width: 100%; 
} 
.horizontal li:hover ul { 
    display: block; 
} 
.horizontal li a { 
    display: block; 
    text-decoration:none; 
    text-align:center; 
    padding:22px 10px; 
    font-family:Arial; 
    font-size:8pt; 
    font-weight:bold; 
    color:#FFFFFF; 
    text-transform:uppercase; 
    border-right:1px solid #607987; 
    background-color:#300000; 
    letter-spacing:.08em 
} 

.horizontal li a:hover { 
    background-color:#680000; 
    color:#a2becf 
} 

.horizontal li:first-child a { border-left:0; } 
.horizontal li:last-child a { border-right:0; }

같이 말했다 :

<div class="navbar"> 
<ul class="horizontal">    
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a> 
     <ul> 
      <li><a href="#">Apple</a></li> 
      <li><a href="#">HTC</a></li> 
      <li><a href="#">Nokia</a></li> 
      <li><a href="#">Samsung</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 
</div>

는 CSS HTML (CSS를 최적화하고) 코드에서 그 사용

<ul> 
    <li>Item 
     <ul> 
      <li>...</li> 
     </ul> 
    </li> 
</ul>

이 내가 생각 해낸 것입니다 , 스타일 중 일부를 변경해야 할 수도 있습니다!

은 또한 너무 많은 작업 JSFiddle Demo

출처

2013-08-18 12:05:12 LinkinTED

감사합니다를 확인, 나는 성공없이이 결과를 얻기 위해 노력 해왔다. 다시 한 번 감사의 말씀을드립니다. –

환영합니다. 답을 해결책으로 표시하십시오 (다리의 "v"). – LinkinTED

navbar에 대한 드롭 다운 메뉴

답변

관련 문제