하위 메뉴 마우스 오버시 상위메뉴 글씨 크기가 줄지 않게 어떻게 해야 하나요?
본문
안녕하세요. 제목 그대로 입니다.
하위메뉴에 마우스오버시 상위메뉴가 줄어듭니다. 안줄어 들게 하고 싶어요.
알려주시면 감사하겠습니다.
<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차메뉴 옮기면 작아지는데요 ㅋㅋ
뚜찌빠찌님 죄송요. 제가 잘못봤어요. 다시 해보고 잘되어서 답변다시 남긴다는게 다른것 하다가 늦었어요. 감사합니다X2.
다행이네요~ :0 제가 잘못 이해 한줄 알았습니다
??? !important;
댓글 감사합니다.
귀한 시간 내주셔서 잘 보았습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
