CSS水平メニュー：表示：インライン;

Question

私はChrome/Firefoxを使用しています。私はこのトピックについていくつかのチュートリアルと質問もここで読んでいます。

私はLIを含むULを持っています。私はLIを "display：inline;"に設定しましたが、そうはなりません。彼らはまだ垂直です。

私は間違っていますか？

Thx。ここで

は私のCSSです：

.menu{ 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
    outline: 1px solid grey; 
    background-color: #f6f6f6; 
    font-size:100%; 
} 

.menu ul{ 
    float: left; 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    background-color: #f6f6f6; 
} 

.menu li ul{ 
    display: none; 
    height: auto; 
    padding: 0px; 
    margin: 0; 
    background-color: #f6f6f6; 
    outline: 1px solid gray; 
    position: absolute; 
    z-index: 200; 
    left: 20px; 
    top: 30%; 
} 

.menu li:hover ul{ 
    display: block; 
} 

.menu li:hover{ 
    background-color: #005ea2; 
} 

.menu li{ 
    display: inline; 
    padding: 0; 
    margin: 0; 
    border-bottom: 1px dotted grey; 
} 

.menu ul li:last-child{ 
    border: none; 
} 


.menu a{ 
    display: block; 
    color: #333333; 
    text-decoration: none; 
    margin: 0px; 
    margin-left: 5px; 
} 

.menu a:hover{ 
    color: white; 
    background-color: #005ea2; 
} 

.menu .menu_header{ 

    color: #333333; 
} 

.menu .menu_header a:hover{ 
    color: white; 
} 

Answer 1

<li>要素は、あなたが回答者には、より良いあなたの状況を理解するために、あなたの答えに関連するHTMLを追加することを検討する可能性のあるすべてのfloat:left

Answer 2

最初のを持っている必要があります。

私はあなたの問題に関連しているかもしれないいくつかの奇妙なものを見つけることができます。

最初にli ulセレクタはあまり役に立ちません。それは逆の意味を持つ可能性がより高いです。ul li

第2に、ホバリング時に何かがdisplay: blockに変更されていることがわかります。これは非常にホバーで持っている 奇妙な行動です、本当ですか？

第3に、a { display: block }があることがわかります。これはコンテナがdisplay: inlineの場合はうまくいきませんので、コンテナの場合はdisplay: inline-blockに切り替えることをお勧めします（これは水平のメニューにはどういう意味ですか）