0

*質問を投稿する前に、このサイトで回答を徹底的に検索しました。複数の解決策を試みましたが、正確なコードでは何も機能しませんでした。このサイトで重複した質問が見つかる場合があります。コーディングとソリューションがまったく同じでない限り、重複しているとは見なしません。このサイトには私の正確なコーディングでは何も機能しなかったため、正確なコードを投稿して助けを求める必要がありました。*

下のようなメニューがあります。そしてそのドロップダウン。現在、ネストされた ul は単にページ全体に広がっています。管理下の素敵なドロップダウンセクションに表示される必要があります。私はこれを検索して、以前に誰もやったことがない同僚に尋ねてみました. ここで jsFiddle を作成しました: http://jsfiddle.net/z3Lpm/

<div id="menu"> 
 <ul>
   <li><a href="#">Home</a></li> 
   <li><a href="#">Administration</a> 
       <ul> 
           <li><a href="#">Products</a></li> 
       </ul> 
   </li> 
 </ul>
</div>

（私の完全なメニューではありませんが、要点はわかります。）

そして私のCSS：

#menu{
   width: 100%;
   border: 1px solid #000;
   height: 50px;
   background-color:#181818;
   font-family: Helvetica, sans-serif;
   font-size: 13px;
}

#menu ul{
    margin-top:  20px;
}

#menu ul li{
    list-style-type: none;
    display: inline;
    margin-left: 50px;
}

#menu ul li a:link{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
   padding-top: 40px;
   padding-bottom: 40px;
   padding-left: 20px;
   padding-right: 20px;
}

#menu ul li a:visited{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
}

#menu ul li a:hover{
   color: #FFF;
   background-color: #81B101;
   -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
   -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);
   box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);
}
4

1 に答える 1

1

ここでは、あなたが何をしているのかわからないので、色などを変更しませんでした. これがうまくいくかどうか教えてください。

http://jsfiddle.net/talymo/LDNpG/

#menu{
    background-color:#181818;
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    height:50px;
}

    #menu ul{
        list-style:none;
        padding-top:15px;
    }

        #menu ul li{
            padding:0px 20px;
            width:auto;
            float:left;
            position:relative;
        }

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

            #menu ul li a{
                color: #FFF;
                text-decoration: none;
                text-transform: uppercase;
                padding-top: 40px;
                padding-bottom: 40px;
                padding-left: 20px;
                padding-right: 20px;
            }

            #menu ul li a:hover{
               color: #FFF;
               background-color: #81B101;
               -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
               -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);
               box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);
            }

        #menu ul li ul{
            overflow:hidden;
            padding:0;
            margin:0;
            display:none;
            position:absolute;
            top:20px;
        }
于 2013-04-08T21:53:56.093 に答える