0
드롭 다운 메뉴가 작동하려고하지만 최상위 레벨에서 마우스를 가져 가면 너비가 확장됩니다. 어떻게 똑같이 유지할 수 있을까요?CSS 마우스를 올리면 드롭 다운 메뉴 폭이 줄어 듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Velocior | Accelerate your web</title>
</head>
<body class="body">
<header role="banner">
<nav role="navigation">
<ul id="top-bar">
<li class="top-icon-block">
<a href="http://ha.efficens-software.com">
<span id="top_icon_home" title="Home"></span>
</a>
</li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_register" title="Register"></span></a></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_login" title="Login"></span></a></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_logout" title="Logout"></span></a></li>
<li class="top-menu-left-edge-block"></li>
<li class="top-menu-button-block"><a href="zbala.com">Velocior</a></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><a href="zbala.com">Technology</a></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Solutions</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Tech Center</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">
<span>Free BETA</span>
<ul class="sub-menu">
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://test/wp/solutions/wordpress-acceleration/">WordPress acceleration</a></li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://test/wp/solutions/apache-acceleration/">Apache acceleration</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://test/wp/solutions/iis-sharepoint-acceleration/">IIS & SharePoint acceleration</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://test/wp/solutions/isps-and-cloud-suppliers/">ISPs and Cloud suppliers</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://test/wp/solutions/developer-tools/">Developer tools</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://test/wp/products-and-pricing/">Pricing</a></li>
</ul>
</li>
<li class="top-menu-right-edge-block"></li>
</ul>
</nav>
</header>
<div id="page">
<div id="logo"><img src="images/velocior_logo.png"></div>
<div class="content long-content">
<div class="content-inner-left long-inner-content">
<div class="content-icon">
<img src="images/timer.png">
</div>
</div>
<div class="content-inner-right long-inner-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
</div>
<div id="mailing-list-box">
<div class="mailing-list-separator"></div>
<div class="mailing-list-text">Join our mailing list : </div>
<!-- <div class="mailing-list-input">[email protected]</div> -->
<input type="text" class="mailing-list-input">
<div class="mailing-list-submit"><img src="images/subscribe.png"></div>
</div>
<!--
<div class="content long-content">
<div class="content-inner-left long-inner-content">
some text and icon
</div>
<div class="content-inner-right long-inner-content">
some text but no icons here ..
</div>
</div>
-->
</div>
<div id="footer">
<span>Some footer text here</span>
</div>
</body>
</html>
을 그리고 CSS 코드는 다음과 같습니다 :
HTML 코드는 다음과 같다
body {
background-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
#top-bar {
position: relative;
display: block;
width: inherit;
height: 39px;
padding: 0px;
margin: 0px;
vertical-align: middle;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
}
.top-icon-block {
width: 50px;
margin: 0px;
display: table-cell;
text-align: center;
}
.top-icon-block a {
position: relative;
top: 5px;
}
.top-icon-block span {
position: relative;
left: 10px;
background-repeat: none;
width: 30px;
height: 20px;
cursor: pointer;
display: block;
}
/* .top-icon-block div:hover { cursor: pointer; } */
#top_icon_home { background-image: url("images/home.png");}
#top_icon_home:hover { background-image: url("images/home_red.png");}
#top_icon_register { background-image: url("images/register.png");}
#top_icon_register:hover { background-image: url("images/register_red.png");}
#top_icon_login { background-image: url("images/login.png");}
#top_icon_login:hover { background-image: url("images/login_red.png");}
#top_icon_logout { background-image: url("images/logout.png");}
#top_icon_logout:hover { background-image: url("images/logout_red.png");}
/*
.top-icon-block img {
padding-top: 8px;
}
.top-icon-block img:hover {
cursor: pointer;
}
*/
.top-icon-sep-block {
width: 4px;
margin: 0px;
display: table-cell;
text-align: center;
/* background-image: url("images/top_icon_separator.png"); */
}
.top-icon-sep-block img {
padding-top: 8px;
}
.top-menu-left-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_left_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-sep-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_separator.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-right-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_right_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-button-block {
width: 80px;
margin: 0px;
background-image: url("images/buttons_bg.png");
background-repeat: repeat-x;
display: table-cell;
}
.top-menu-button-block span, a{
font-size: 12px;
display: inline-block;
width: inherit;
text-align: center;
vertical-align: 6px;
color: white;
text-decoration: none;
}
.top-menu-button-block *:hover {
color: darkorange;
cursor: pointer;
}
#page {
position: relative;
/* background-image: url('images/background.jpg'); */
background-repeat: no-repeat;
display: inline-block;
width: inherit;
height: 564px;
z-index: 3;
/* border-style: solid;
border-color: red;
border-width: 1px;*/
}
#logo {
position: relative;
top: 25px;
left: 25px;
z-index: 2;
}
#footer {
position: relative;
background-color: #414142;
display: inline-block;
width: inherit;
height: 20px;
}
#footer span {
display: inline-block;
width: inherit;
text-align: center;
vertical-align: -2px; /*middle */
font-size: 10px;
color: white;
text-decoration: none;
}
.content {
position: absolute;
border-top: 1px solid lightgrey;
border-bottom: 1px solid grey;
border-radius: 15px 0px 15px 0px;
width: 640px;
bottom: 60px;
right: 0px;
padding: 5px;
background-color: rgba(255,255,255,0.92);
font-size: 13px;
}
.content-inner-left {
position: absolute;
border-right: 1px solid #AAAAAA;
width: 100px;
display: table-cell;
padding: 5px;
}
.content-inner-right {
position: absolute;
width: 515px;
display: table-cell;
left: 120px;
padding: 5px;
}
.content-icon {
position: relative;
width: 60px;
height: 60px;
top: 0px;
margin: auto;
}
.short-content { height: 130px; }
.long-content {height: 280px; }
.short-inner-content { height: 120px; }
.long-inner-content {height: 270px; }
#mailing-list-box {
position: absolute;
width: 350px;
height: 18px;
bottom: 42px;
right: 300px;
background-color: black;
padding: 0px;
}
.mailing-list-separator {
position: absolute;
display: table-cell;
left: 20px;
width: 3px;
height: inherit;
background-image: url("images/subscription_sep.png");
background-repeat: no-repeat;
top: 1px;
}
.mailing-list-text {
position: absolute;
display: table-cell;
left: 50px;
top: 1px;
width: 110px;
height: inherit;
color: white;
}
.mailing-list-input {
position: absolute;
display: table-cell;
left: 150px;
width: 140px;
top: 2px;
height: 13px;
vertical-align: middle;
color: red;
padding: 0px;
border: none;
font-size: 11px;
border-radius:2px;
}
.mailing-list-submit {
position: absolute;
display: table-cell;
left: 290px;
top: 2px;
width: 74px;
height: inherit;
cursor: pointer;
}
/*
nav ul:after {
content: "";
clear: both;
display: block;
}
*/
nav ul ul {
list-style-type: none;
}
nav ul li ul {display: none;}
nav ul li:hover > ul {display: inline-block;}
nav ul ul {
position: abslute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
background-color: grey;
}
/*
#top-bar li ul li {
position: relative;
z-index: 5;
background-color: rgba(0,0,0,0.6);
width: 220px;
height: 20px;
text-align: center;
border-bottom: 1px solid black;
border-radius: 4px;
display: block;
}
*/
/*
#top-bar li ul ul {
top: 0;
left: 100%;
}
#top-bar ul li:hover > ul {
border-left: 0;
display: block;
}
#top-bar li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
#top-bar li ul li a:hover {
background: #e3e3e3;
color: #444;
}
*/
문제는 우리가 베타 메뉴에 마우스를 가져 가면, 그것은을 보여주기 위해 확장이다 하위 수준 메뉴. 우리가 그걸 막을 수 있을까요?
감사합니다,