0

ホバーしたときにボタンがある垂直ナビゲーションバーがあり、そのボタンの横に水平にオプションを表示したいと思います。

私は HTML を持っていますが、CSS でホバー効果を発生させる方法がわかりません。これを達成するための最良の方法は何ですか?

HTML

<nav>
        <ul>
            <li><a href="index.php?page_id=7"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="about ZOPA" /></a></li>
                <ul class="subs">
                    <li><a href="#">Realty</a></li>
                    <li><a href="#">RA</a></li>
                    <li><a href="#">WM + SB</a></li>
                    <li><a href="#">Vendors</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=16"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="ZOPA blog" /></a></li>
            <li><a href="index.php?page_id=13"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/share.png" alt="share with ZOPA" /></a></li>
            <li><a href="index.php?page_id=9"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="contact ZOPA" /></a></li>
            <li><a href="http://www.thezopateam.com/"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/properties.png" alt="ZOPA properties" /></a></li>
                <ul class="subs">
                    <li><a href="#">Buying</a></li>
                    <li><a href="#">Selling</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=11"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/gallery.png" alt="ZOPA gallery" /></a></li>
        </ul>
    </nav>

更新されたcss

nav li {
    width: 100px;
    margin: 1px;
    list-style-type: none;
}

nav > ul > li {
    position: relative; 
}

nav li ul {
    position: absolute;
    top: 0;
    left: 120px;
}

nav li ul li { 
    display: inline; 
}

nav li:not(:hover) ul { 
    display: none; 
}
4

2 に答える 2

1

サブメニューの簡単なデモを次に示します: http://jsbin.com/iyijed/1/edit

重要なルールはnav li:not(:hover) ul { display: none; }、親がホバーされるまでサブメニューを非表示にすることです。

(古いブラウザ) に問題が:notある場合は、単純にdisplay: noneサブメニューを配置して、 でオーバーライドできますnav li:hover ul { display: block; }。

于 2012-10-16T21:17:00.627 に答える
0

このような何かがあなたを近づけるはずです:

nav > ul > li {
    position: relative;
}

nav > ul > li > ul.subs { 
    display:none;
    position:absolute;
    right: 5%;
}

nav > ul > li:hover > ul.subs {
    display:block;
}
于 2012-10-16T21:14:24.363 に答える