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

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

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

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

Copy
<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개

채택된 답변
+20 포인트
Copy
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

답변감사합니다 ^^
하지만 제가 의도한 바는 상위메뉴에 마우스를 올리면 글씨가 커진 상태에서 하위메뉴에 마우스를 올리면 상위메뉴 글씨가 작아지게 되는데 커진 상태를 그대로 유지하는 것입니다.
ㅇㅓ... 그렇지 안나요 ? 제가 테스트 한건 말씀하신대로 1차메뉴에 올래면 하위메뉴 노출하면서 1차메뉴 다시 작아지지않고 다른 1차메뉴 옮기면 작아지는데요 ㅋㅋ
뚜찌빠찌님 죄송요. 제가 잘못봤어요. 다시 해보고 잘되어서 답변다시 남긴다는게 다른것 하다가 늦었어요. 감사합니다X2.
다행이네요~ :0 제가 잘못 이해 한줄 알았습니다

댓글을 작성하려면 로그인이 필요합니다.

답변에 대한 댓글 1개

귀한 시간 내주셔서 잘 보았습니다. 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

??? !important;

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

댓글 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고