6

シンプルなcssドロップダウンメニューを作ろうとしていました。リンクの上にカーソルを置いたときに、ドロップダウン サブ メニューを表示できません。以下は私のhtmlとcssのルールです、ありがとう。

    ul#menu li
    {
        position:relative;
        list-style-type:none;
        float: left;
        padding:0px;
        width: 125px;
        height: 25px;
    }
    ul#sub1 li
    {
        position:absolute;
        left:0;
        width:125px;
        visibility: hidden;
    }
    ul#menu li:hover #sub1
    {
        visibility:visible;
    }


    <ul id="menu">
        <li><a href="#">Hyperlink 1</a></li>
        <li><a href="#">Hyperlink 2</a>
            <ul id="sub1"> 
                <li><a href="#">Hyperlink 2.1</a></li>
                <li><a href="#">Hyperlink 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
    </ul>
4

4 に答える 4

3

そのようなものに可視性プロパティを使用しないでください。問題を解決する次のコードを試してください。

あなたのCSS:

ul#menu li{
    float: left;
    list-style-type:none;
    width: 125px;
}
li#sub1 ul{
    display: none;
}
ul#menu li#sub1:hover ul{
    display: block;
}

更新された HTML: (ul の代わりにドロップダウンを含む li に id を適用)

<ul id="menu">
    <li><a href="#">Hyperlink 1</a></li>
    <li id="sub1"><a href="#">Hyperlink 2</a>
        <ul> 
            <li><a href="#">Hyperlink 2.1</a></li>
            <li><a href="#">Hyperlink 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
</ul>

さらに、このページをチェックして、表示と可視性の仕組みを学ぶことができます - http://www.tutorialrepublic.com/css-tutorial/css-visibility.php

于 2013-09-18T04:56:54.997 に答える
2

ここにあなたの問題を解決するための完全な HTML+CSS スクリプトがあります

<style>
ul#menu li
{
   position:relative;
   list-style-type:none;
   float: left;
   padding:0px;
   width: 125px;
   height: 25px;
}

ul#menu li ul#sub1
{
   background:red;
   display:none;
   padding:0px;
   margin:0px;
   border:0px;
   position:absolute;
   width:230px;
   z-index:200;
}

ul#menu li:hover ul#sub1
{
   display:block;
}

ul#menu li ul a:hover, ul#menu li ul li:hover a
{
   background:green;
   color:#ffffff;
   text-decoration:none;
}
</style>


<ul id="menu">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a>
        <ul id="sub1">
            <li><a href="#">Hyperlink 2.1</a></li>
            <li><a href="#">Hyperlink 2.2</a></li>
        </ul>
    </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
</ul>

ここで変更を試すことができます： http://www.okeschool.com/code-editor/css/how-to-make-drop-down-menu-with-css-and-image.html

于 2014-12-15T20:27:10.957 に答える