HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>transarent nav bar</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>

  <ul>
    <li>
      <a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="">profile</a></li>
      </ul>
    </li>
    <li><a href="#">Category</a>
      <ul>
        <li><a href="">category1</a></li>
        <li><a href="">category2</a></li>
        <li><a href="">category3</a></li>
        <li><a href="">category4</a></li>
      </ul>
    </li>
    <li><a href="#">Contents</a>
      <ul>
        <li><a href="">content1</a></li>
        <li><a href="">content2</a></li>
      </ul>
    </li>
    <li><a href="#">New</a></li>
  </ul>

</body>

</html>

CSS

styles.css


body {
 background-size: none;
 margin-left: 10%;
}

ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
 font-family: arial;
}

ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: black;
 opacity: .8;
 line-height: 40px;
 text-align: center;
 font-size: 20px;
}

ul li a {
 text-decoration: none;
 color: white;
 display: block;
}

ul li a:hover {
 background-color: green;
}

/*非表示にしておく*/
ul li ul li{
 display: none; 
}

/*ドロップダウンの要素を表示*/
ul li:hover ul li {
 display: block;
}

Reference

이 문제에 관하여(HTML+CSS 드롭다운 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/anx/items/5708d48d6343ea45fb38

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다