하위 메뉴 마우스 오버시 상위메뉴 글씨 크기가 줄지 않게 어떻게 해야 하나요?

하위 메뉴 마우스 오버시 상위메뉴 글씨 크기가 줄지 않게 어떻게 해야 하나요?

QA

하위 메뉴 마우스 오버시 상위메뉴 글씨 크기가 줄지 않게 어떻게 해야 하나요?

본문

안녕하세요. 제목 그대로 입니다.

하위메뉴에 마우스오버시 상위메뉴가 줄어듭니다. 안줄어 들게 하고 싶어요.

알려주시면 감사하겠습니다.


<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

.menu {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-family:'Noto Sans KR', sans-serif;
}
.menu li { list-style: none; }
.menu li a {
  display: table;
  margin-top: 1px;
  padding: 0 10px;
  width: 100%;
  background: ;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  font-size:2em;
  font-weight:500;
  text-shadow:0 0 10px rgba(0,0,0,0.5);
  overflow: hidden;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu > li:first-child a { margin-top: 0; }
.menu li a:hover {
  font-size:3em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu li ul {
  margin: -2px 0 0;
  padding: 0;
}
.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  color: #fff;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 0 0;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a {
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  font-size:12px;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
/*
.menu > li:hover li a:hover {
  background: rgba(0,0,0,0.2);
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}*/
.menu > li:hover ul {
  overflow:hidden;
  background: rgba(0,0,0,0.2);
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu li ul li{
  float:left;
}
.current{
  color:red;
  }
</style>
  <ul class="menu">
    <li><a href="#">ABOUT US</a>
      <ul>
        <li><a href="../sub01/sub01_01.php">Company General</a></li>
        <li><a href="../sub01/sub01_02.php">History</a></li>
        <li><a href="../sub01/sub01_03.php">Organization</a></li>
        <li><a href="../sub01/sub01_04.php">ocation</a></li>
        <li><a href="../sub01/sub01_05.php">Contact</a></li>
      </ul>
    </li>
    <li><a href="#">PROGRAMS</a>
      <ul>
        <li><a href="../sub02/sub02_01.php">Boeing</a></li>
        <li><a href="../sub02/sub02_02.php">Airbus</a></li>
        <li><a href="../sub02/sub02_03.php">Other</a></li>
      </ul>
    </li>
    <li><a href="#">PRODUCTS</a>
      <ul>
        <li><a href="../sub03/sub03_01.php">Sheet Metal</a></li>
        <li><a href="../sub03/sub03_02.php">Macining</a></li>
        <li><a href="../sub03/sub03_03.php">Assembly</a></li>
        <li><a href="../sub03/sub03_04.php">Roll Formed Section</a></li>
      </ul>
    </li>
    <li><a href="#">EQUOIPMENTS</a>
      <ul>
        <li><a href="../sub04/sub04_01.php">Equipments</a></li>
        <li><a href="../sub04/sub04_02.php">Equipment List</a></li>
      </ul>
    </li>
    <li><a href="#">QUALITY APPROVAL</a></li>
    <li><a href="#">CUSTOMERS</a></li>
  </ul>

이 질문에 댓글 쓰기 :

답변 3


<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
.menu {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-family:'Noto Sans KR', sans-serif;
}
.menu li { list-style: none; }
.menu li a {
  display: table;
  margin-top: 1px;
  padding: 0 10px;
  width: 100%;
  background: ;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  font-size:2em;
  font-weight:500;
  text-shadow:0 0 10px rgba(0,0,0,0.5);
  overflow: hidden;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu > li:first-child a { margin-top: 0; }
.menu li:hover {
  font-size:1.5em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu li ul {
  margin: -2px 0 0;
  padding: 0;
}
.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  color: #fff;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 0 0;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a {
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  font-size:12px;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
/*
.menu > li:hover li a:hover {
  background: rgba(0,0,0,0.2);
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}*/
.menu > li:hover ul {
  overflow:hidden;
  background: rgba(0,0,0,0.2);
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu li ul li{
  float:left;
}
.current{
  color:red;
  }
</style>
<ul class="menu">
    <li><a href="#">ABOUT US</a>
      <ul>
        <li><a href="../sub01/sub01_01.php">Company General</a></li>
        <li><a href="../sub01/sub01_02.php">History</a></li>
        <li><a href="../sub01/sub01_03.php">Organization</a></li>
        <li><a href="../sub01/sub01_04.php">ocation</a></li>
        <li><a href="../sub01/sub01_05.php">Contact</a></li>
      </ul>
    </li>
    <li><a href="#">PROGRAMS</a>
      <ul>
        <li><a href="../sub02/sub02_01.php">Boeing</a></li>
        <li><a href="../sub02/sub02_02.php">Airbus</a></li>
        <li><a href="../sub02/sub02_03.php">Other</a></li>
      </ul>
    </li>
    <li><a href="#">PRODUCTS</a>
      <ul>
        <li><a href="../sub03/sub03_01.php">Sheet Metal</a></li>
        <li><a href="../sub03/sub03_02.php">Macining</a></li>
        <li><a href="../sub03/sub03_03.php">Assembly</a></li>
        <li><a href="../sub03/sub03_04.php">Roll Formed Section</a></li>
      </ul>
    </li>
    <li><a href="#">EQUOIPMENTS</a>
      <ul>
        <li><a href="../sub04/sub04_01.php">Equipments</a></li>
        <li><a href="../sub04/sub04_02.php">Equipment List</a></li>
      </ul>
    </li>
    <li><a href="#">QUALITY APPROVAL</a></li>
    <li><a href="#">CUSTOMERS</a></li>
  </ul>

답변감사합니다 ^^
하지만 제가 의도한 바는 상위메뉴에 마우스를 올리면 글씨가 커진 상태에서 하위메뉴에 마우스를 올리면 상위메뉴 글씨가 작아지게 되는데 커진 상태를 그대로 유지하는 것입니다.

ㅇㅓ... 그렇지 안나요 ? 제가 테스트 한건 말씀하신대로  1차메뉴에 올래면 하위메뉴 노출하면서 1차메뉴 다시 작아지지않고 다른 1차메뉴 옮기면 작아지는데요 ㅋㅋ

??? !important;

https://codepen.io/sinbi/pen/NWbLBEd

답변을 작성하시기 전에 로그인 해주세요.
전체 466
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT