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 に答える