메뉴 모음에 드롭 다운 메뉴를 추가하려면 어떻게합니까

"우리 컬렉션"에 대한 드롭 다운 메뉴 막대를 만들려고 시도하고 있지만 내 시도가 작동하지 않습니다. 누구든지 나 한테 빌려 줄 수있어. 아래는 내 HTML과 CSS입니다. 나는 그것을 내 무작위 시행 착오를 제거하고, UL UL .menu 유지했다 : 나는 오래 전에 만들어진 오래된 메뉴를 가지고 {표시 없음} 메뉴 모음에 드롭 다운 메뉴를 추가하려면 어떻게합니까

* html .clearfix { 
 
     height: 1%; 
 
     overflow: visible; 
 
    } 
 
    * + html .clearfix { 
 
     min-height: 1%; 
 
    } 
 
    .clearfix:after { 
 
     clear: both; 
 
     content: "."; 
 
     display: block; 
 
     height: 0; 
 
     visibility: hidden; 
 
     font-size: 0; 
 
    } 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .menu { 
 
     text-align: center; 
 
     background-color: #222; 
 
    } 
 
    .menu ul { 
 
     list-style: none; 
 
     height: auto; 
 
     padding: 40px; 
 
     width: 500px; 
 
     float: right; 
 
    } 
 
    .menu ul li { 
 
     float: left; 
 
     padding: 0 20px; 
 
     font-size: 20px; 
 
     font-family: Impact; 
 
    } 
 
    .menu ul ul { 
 
     display: none; 
 
    } 
 
    .menu ul li a { 
 
     color: white; 
 
     text-decoration: none; 
 
     transition: 350ms; 
 
    } 
 
    .menu ul li a:hover { 
 
     color: #ed702b 
 
    } 
 
    .title { 
 
     float: left; 
 
     font-size: 40px; 
 
     margin-left: -173px; 
 
     margin-top: 37px; 
 
    } 
 
    .title a { 
 
     text-decoration: none; 
 
     color: white; 
 
    } 
 
    .center { 
 
     width: 980px; 
 
     margin: 0 auto; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
    <link rel="stylesheet" type="text/css" href="includes/site.css"> 
 
    <title>Home</title> 
 
</head> 
 

 
<body> 
 
    <div class="menu"> 
 

 
    <div class="center clearfix" style="height: 124px"> 
 
     <h1 class="title"><a href="#">My first web</a></h1> 
 

 
     <ul class="clearfix"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Our Collections</a> 
 
     </li> 
 
     <ul> 
 
      <li><a href="#">First Collection</a> 
 
      </li> 
 
      <li><a href="#">Second Collection</a> 
 
      </li> 
 
     </ul> 
 
     <li><a href="#">About Us</a> 
 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2014-09-24 Samer El Sabeh

중복 가능성을 [순수 CSS 기반의 드롭 다운 메뉴를 만드는 방법 메뉴?] (http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu) – xDaevax

합니다.

난 당신이에서 작업 할 수 있다고 생각 : Fiddle

링크 (3) 드롭 다운 메뉴입니다. 그냥 Fiddle

<div id="mainnav"> 
<nav> 
<ul> 
    <li><a href="#.html">link1</a></li> 
    <li><a href="#.html">link2</a></li> 
    <li><a href="#.html">link3</a> 
     <ul class="sub"> 
      <li><a href="#.html">2011</a></li> 
      <li><a href="#.html">2012</a></li> 
      <li><a href="#.html">2013</a></li> 
     </ul> 
    </li> 
    <li><a href="#s.html">link4</a></li> 
    <li class="end"><a href="#.html">link5</a></li> 

</ul> 
</nav> 
</div>

좀 더 도움이 필요하면 그냥 봐.

출처

2014-09-24 14:32:03

나는 이것을 함께 던졌습니다. 그것은 아무것도 우아한 없다, 그러나 그것은 좋은 출발점 및 메뉴의 바이올린에

링크 원래 골격을 사용의

http://jsfiddle.net/Lgpapw2p/

<ul class='menu'> 
    <li> 
     <a href="#">Home</a> 
    </li> 

    <li> 
     <a href="#">Our Collections</a> 
     <ul> 
      <li><a href="#">First Collection</a></li> 

      <li><a href="#">Second Collection</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">About Us</a> 
    </li> 
    <li> 
     <a href="#">Contact Us</a> 
    </li> 

</ul> 

.menu{ 
    list-style:none; 
    font-weight:bold; 
    margin-bottom:10px; 
    float:left; 
    width:100%; 

} 
.menu li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 
.menu a{ 
    display:block; 
    padding:5px; 
    color:#fff; 
    background:#333; 
    text-decoration:none; 
} 
.menu a:hover{ 
    color:#fff; 
    background:#6b0c36; 
    text-decoration:underline; 
} 


.menu ul{ 
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
} 
.menu ul li{ 
    padding-top:1px; 
    float:none; 
} 
.menu ul a{ 
    white-space:nowrap; 
} 
.menu li:hover ul{ 
    left:0; 
} 
.menu li:hover a{ 
    background:#008; 
    text-decoration:underline; 
} 
.menu li:hover ul a{ 
    text-decoration:none; 
} 
.menu li:hover ul li a:hover{ 
    background:#333; 
}

출처

2014-09-24 14:38:07

메뉴 모음에 드롭 다운 메뉴를 추가하려면 어떻게합니까

답변

관련 문제