ドロップダウンメニューcss

Question

こんにちは私はdropdownメニューに問題があります... dropdownメニューをCSSコードで作成しようとしていますが、私はそれを作る方法がありません。そして、あなたが置くと

#tabs { 
 
    width: 100%; 
 
    background: #F1F1F1; 
 
    font-size: 93%; 
 
    line-height: normal; 
 
    float: right; 
 
} 
 

 
#tabs ul { 
 
    margin: 0; 
 
    padding: 10px 10px 0 220px; 
 
    list-style: none; 
 
} 
 

 
#tabs li { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#tabs a { 
 
    margin: 0; 
 
    padding: 6 0 0 4px; 
 
    text-decoration: none; 
 
} 
 

 
#tabs a span { 
 
    display: block; 
 
    padding: 5px 15px 4px 6px; 
 
    color: #FFF; 
 
    background: #575757; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
#tabs span { 
 
    float: left; 
 
    display: block; 
 
    padding: 19px 15px 1px 12px; 
 
    font-family: Arial "sans-serif"; 
 
} 
 

 

 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
 

 
#tabs a span { 
 
    float: none; 
 
} 
 

 

 
/* End IE5-Mac hack */ 
 

 
#tabs a:hover span { 
 
    color: #FFF; 
 
}

<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#"><span>Domov</span></a></li> 
 
    <li><a href="#"><span>test dropdown</span></a></li> 
 
    </ul> 
 
</div>

Answer 1

基本的なコンセプトはli要素の内側にあなたのサブメニューでul巣で、デフォルトでul年代を隠し、：

そしてここでコードがありますli、ul

#tabs { 
 
    width: 100%; 
 
    background: #F1F1F1; 
 
    font-size: 93%; 
 
    line-height: normal; 
 
    float: right; 
 
} 
 

 
#tabs > ul { 
 
    margin: 0; 
 
    padding: 10px 10px 0 220px; 
 
    list-style: none; 
 
} 
 

 
#tabs > ul > li { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#tabs > ul > li > a { 
 
    margin: 0; 
 
    padding: 6 0 0 4px; 
 
    text-decoration: none; 
 
} 
 

 
#tabs > ul > li > a span { 
 
    display: block; 
 
    padding: 5px 15px 4px 6px; 
 
    color: #FFF; 
 
    background: #575757; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
#tabs > ul > li > a span { 
 
    float: left; 
 
    display: block; 
 
    padding: 19px 15px 1px 12px; 
 
    font-family: Arial "sans-serif"; 
 
} 
 

 

 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
 

 
#tabs > ul > li > a span { 
 
    float: none; 
 
} 
 

 

 
/* End IE5-Mac hack */ 
 

 
#tabs > ul > li > a:hover span { 
 
    color: #FFF; 
 
} 
 

 
/* hide submenus by default */ 
 
li ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
/* show the child submenu on hover */ 
 
li:hover > ul { 
 
    display: block; 
 
}

<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#"><span>Domov</span></a></li> 
 
    <li> 
 
     <a href="#"><span>test dropdown</span></a> 
 
     <ul> 
 
     <li>foo</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

以下は、ホバーサポートと基本的な書式設定を含むドロップダウンメニューです。あなたが作業するのはかなり自明であるはずですが、不明な点があればコメントを残してください。

基本的な考え方は、メニュールート（.dropbtn:hover）を表すボタンの上にマウスを置くまで、dropdown-contentクラスはメニューエントリを含むdivを非表示にすることです。

プレーンHTMLとCSS。

.menuContainer { 
 
    padding-left: 5px; 
 
    padding-top: 5px; 
 
    background-color: #cccccc; \t \t 
 
} \t 
 

 
/* Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #808080; 
 
    color: #000; 
 
    border: solid black 1px; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 0.75em; 
 
    height: 2em; 
 
    width: 110px; 
 
    margin: 0px; 
 
    margin-bottom: 5px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; \t \t 
 
} 
 

 
.dropbtn:hover { 
 
    background-color:#00F; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 100; \t \t 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #e6e6e6; 
 
    \t /*min-width: 100px;*/ 
 
    width: 120%; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    text-align: left; 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover { 
 
\t background-color: #CCC; 
 
} 
 

 
/* Show the dropdown menu on hover */ 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.dropdown:hover .dropbtn { 
 
    background-color: #00F; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
    <link rel=stylesheet href="menuex.css" type="text/css"/> 
 
</head> 
 
<body> 
 

 
    <div class="menuContainer"> 
 
    
 
    <div class="dropdown"> 
 
     <button class="dropbtn">List 1</button> 
 
     <div class="dropdown-content"> 
 
     <a href="a1.html">Option 1</a> 
 
     <a href="a2.html">Option 2</a> 
 
     <a href="a3.html">Option 3</a> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="dropdown"> 
 
     <button class="dropbtn">List 2</button> 
 
     <div class="dropdown-content"> 
 
     <a href="b1.html">Option 1</a> 
 
     <a href="b2.html">Option 2</a> 
 
     <a href="b3.html">Option 3</a> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

Answer 3

あなたはJavaScriptを（私もそれをさらに容易にするためにjQueryのを使用していますが、必要であればなしで行うことができます）使用することができます。

$(".dropdown-toggle").click(function(event){ 
 
\t event.preventDefault(); 
 
    $("#" + $(this).data("toggle")).toggleClass("toggled"); 
 
});

.dropdown ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.dropdown:not(.toggled) ul{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><a href="#" class="dropdown-toggle" data-toggle="exampleDropdown">Click Me</a></p> 
 

 
<div class="dropdown" id="exampleDropdown"> 
 
    <ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
    </ul> 
 
</div>