251028 picogram (top-bar)

/* 마지막 라인 지우기 */

.menu2-nav>ul:last-child {border: none;}

/* .menu2-nav>ul:nth-child(6) {border: none;}

  - 목적에 맞게 사용하면 가독성이 좋으나 틀린 답은 아니다.*/

 

<!-- ctrl+h 누르면 전체 코드 바꾸기 -->

        <!-- ul1-4 -->

        <ul>

          <li><a href="#" class="b450014">>CEO 메시지</a></li>

          <li><a href="#" class="b450014">회사소개</a></li>

          <li><a href="#" class="b450014">인재채용</a></li>

          <li><a href="#" class="b450014">오시는 길</a></li>

        </ul>

        <!-- ul2-4 -->

        <ul>

          <li><a href="#" class="b450014">연구소 소개</a></li>

          <li><a href="#" class="b450014">보유기술</a></li>

          <li><a href="#" class="b450014">국내외 특허</a></li>

          <li><a href="#" class="b450014">국책 과제</a></li>    

        </ul>

        <!-- ul3-5 -->

        <ul>

          <li><a href="#" class="b450014">Pureal Brand</a></li>

          <li><a href="#" class="b450014">카운터 탑 정수기</a></li>

          <li><a href="#" class="b450014">피처 정수기</a></li>

          <li><a href="#" class="b450014">정수 필터</a></li>

          <li><a href="#" class="b450014">소재 및 부품</a></li>

        </ul>

        <!-- ul4-3 -->

        <ul>

          <li><a href="#" class="b450014">주가 정보</a></li>

          <li><a href="#" class="b450014">공시현황</a></li>

          <li><a href="#" class="b450014">투자자 공고사항</a></li>

        </ul>

        <!-- ul5-3 -->

        <ul>

          <li><a href="#" class="b450014">공지사항</a></li>

          <li><a href="#" class="b450014">피코그램 소식</a></li>

          <li><a href="#" class="b450014">홍보센터</a></li>

        </ul>

        <!-- ul6-2 -->

        <ul>

          <li><a href="#" class="b450014">자료실</a></li>

          <li><a href="#" class="b450014">B2B 상담문의</a></li>

        </ul>

      </nav>

     </div>

.menu>ul>li>a {

  background-color: pink;

  position: relative;

  /* padding: 상하 좌우; */

  padding: 8px 12px;

  /* 너비높이 커스텀 가능, width: auto;=0 */

  /* display: inline-block; 단점 많음

   1. 요소끼리 높이값이 다르면 정렬이 망가진다.

   2. 요소끼리 알 수 없는 여백이 생긴다.

   3. 가로,세로 정렬이 까다롭다. */

  display: inline-flex;

    /* 너비높이 커스텀 가능, flex-container인 상태에도 width: auto;=0

    1. 정렬이 자유롭다.

    2. 요소끼리 알수 없는 여백도 없다.

    3. gap값을 사용할 수 있다.*/

}

.menu>ul>li>a::after {

  content: "";

  position: absolute;

  bottom: 0; left: 0;

  width: 100%;  height: 2px;

  background-color: #111;

}

.menu>ul>li>a {

  position: relative;

  /* padding: 상하 좌우; */

  padding: 8px 12px;

  /* 너비높이 커스텀 가능, width: auto;=0 */

  /* display: inline-block; 단점 많음

   1. 요소끼리 높이값이 다르면 정렬이 망가진다.

   2. 요소끼리 알 수 없는 여백이 생긴다.

   3. 가로,세로 정렬이 까다롭다. */

  display: inline-flex;

    /* 너비높이 커스텀 가능, flex-container인 상태에도 width: auto;=0

    1. 정렬이 자유롭다.

    2. 요소끼리 알수 없는 여백도 없다.

    3. gap값을 사용할 수 있다.*/

}

.menu>ul>li>a::after {

  content: "";

  position: absolute; bottom: 0; left: 0;

  width: 0;  height: 1px;

  background-color: #9d1e34;

  transition: 0.5s;

}

.menu>ul>li:hover a::after {

  width: 100%;

}

.top-bar:hover .menu>ul>li>a {

  color: #111;

}

/* id선택자가 모든 선택 중에 가장 힘이 강하다.

 html에서 속성값을 쓸 때 같은 이름을 사용할 수 없다. */

.menu>#me1ul>li:hover a {

  color: #9d1e34;

}