CSSナビゲーションメニューText

私はStackoverflowを初めて使いました。単純なCSSナビゲーションメニューを作成したいだけです。これらのアイテムを左から右に揃えるにはどうしたらいいですか？また、マウスのフォーカスでサブアイテムを作ることができますか？CSSナビゲーションメニューText

<html> 
 

 
<head> 
 
    <title>Test App</title> 
 
    <style> 
 
    li{ 
 
     list-style:none; 
 
    } 
 
    ul{ 
 
     background-color: green; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
     <li> 
 
      George 
 
     </li> 
 

 
     <li> 
 
      Belly 
 
     </li> 
 

 
     <li> 
 
      Mac 
 
     </li> 
 
    </ul> 
 
</body> 
 

 
</html>

出典

2016-10-30 Arya

に助けられることを願っています。 – Jhecht

適切なスペースを持つことは、マウスのフォーカスにも似ています。アイテムの背景色を変更することも、サブアイテムを追加することもできます。 – Arya

この質問をする前に何を試しましたか？おそらくここに来る前にメニューを作る方法についてのチュートリアルを見てきたでしょうか？ – Jhecht

はこれを試してみてください:)これはあなたの質問は、多くの人々に多くのことを意味するかもしれません「プロ」として少し曖昧であなた

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: green; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li><a href="#home">George</a></li> 
 
    <li><a href="#news">Belly</a></li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Mac</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<h4>Dropdown Menu inside a Mac</h4> 
 
<p>Hover over (mouse focus) the "Mac" you can see the dropdown menu.</p> 
 
<p>Hope this will be helped to you,please put a comment if answer is helpful.Good Luck!!!</p> 
 

 
</body> 
 
</html>

出典

2016-10-30 08:15:56 SMW

これらは、CSSの背後にある非常に基本的な考え方ですので、私はそれらを説明しません。うまくいけば、これであなたが始まります。

.nav { 
 
    list-style-type: none; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    height:55px; 
 
    box-sizing:border-box; 
 
    text-align:center; 
 
    line-height:15px; 
 
    padding:20px 10px; 
 
} 
 
.nav li:hover{ 
 
    background-color:darkgreen; 
 
    }

<html> 
 

 
<head> 
 
    <title>Test App</title> 
 
    <style> 
 
    li { 
 
     list-style: none; 
 
    } 
 
    ul { 
 
     background-color: green; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul class="nav"> 
 
    <li> 
 
     George 
 
    </li> 
 

 
    <li> 
 
     Belly 
 
    </li> 
 

 
    <li> 
 
     Mac 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

出典

2016-10-30 05:19:40 Jhecht

あなたはli要素のdisplay CSSプロパティを変更することにより、これを修正することができます。

.nav li { 
    display: inline-block; 
}

一般的に、 displayプロパティは many値を持つことができます - このうち、あなたがあなたの人生を美しくする（ と以下）ここでは考慮される必要がある3つの値は、主にあります。

display: inline;：幅と高さを設定することはできません。他の要素を左右に置くことができます。
display: block;：ブロック要素の後に改行を強制します。
display: inline-block：上記のプロパティの組み合わせ。

これらの値の間の基本的な差異を解消することが基本です。
詳しい説明はhereです。

出典

2016-10-30 07:03:50 Wajahath

CSSナビゲーションメニューText

答えて

関連する問題