0

我们正在尝试使下拉菜单正常工作，但是当悬停在顶层时，它会扩展其宽度。我们如何确保它保持不变？

html代码如下：

<!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 &amp; 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">NREGEV@GMAIL.COM</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 代码如下所示：

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;
}
*/

问题是当我们将鼠标悬停在 BETA 菜单上时，它会展开以显示子级菜单。我们该如何预防呢？

谢谢，

4

1 回答 1

0

我还没有找到一种不使用 javascript 的方法。

这是我用来完成此操作的jQuery 代码片段。该代码将为顶级 li 和子菜单 ul 设置显式宽度。

您需要一些 css 规则。

父项nav ul > li需要overflow:visible;设置。

于 2013-02-21T16:12:30.297 回答