css ドロップダウンメニュー
http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/
上記のHPを参考にして、CSSでドロップダウンメニューをつくろうと試みましたが、上手く作動しません。どこが間違っているのでしょうか。
〇Html文-------------
<!DOCTYPE html>
<html lang="ja">
<head>
<title>〇〇</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style_test.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href="#">利用案内</a></li>
<li><a href="#">あいうえお</a>
<ul>
<li><a href="#">かきくけこ</a> </li>
<li><a href="#">さしすせそ</a> </li>
<li><a href="#">たちつてと</a> </li>
</ul>
</li>
</ul>
</div><!--menu-->
</div><!--container-->
</body>
</html>
〇style_test.css---------
@charset "UTF-8";
/*================================================
* CSSリセット
================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/*================================================
* 一般・共通設定
================================================*/
body{
color:#000;
font-size: 14px;
line-height: 1.4em;
font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , Meiryo UI , "ＭＳ Ｐゴシック" , "MS PGothic" , "Microsoft Yahei", "PingHei", "Malgun Gothic", "Yoon Gothic", sans-serif;
background:#fff;
}
#container {
overflow:hidden;
width:1000px;
margin: 0px auto;
background:#fff;
}
/*================================================
* メニュー
================================================*/
.menu {
clear: both;
overflow: hidden;
margin: 16px auto;
}
.menu ul {
margin:0;
padding:0;
}
.menu ul li {
list-style: none;
margin:0;
padding:0;
font-size:13px;
float: left;
position: relative;
width: 110px;/*親メニューの幅*/
height: 35px;/*親メニューの高さ*/
line-height: 35px;
background:#08046c;/*親メニューの背景色*/
color: #fff;/*親メニューの文字色*/
text-align:center;
font-weight:500;
}
.menu ul li a {
color: #fff;
display: block;
text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
background:#085af5;/*ホバー時の親メニューの背景色*/
color:#fff;/*ホバー時の親メニューの文字色*/
}
.menu ul li ul {
position: absolute;
top: 35px;/*親メニューの高さと同じにする*/
width: 110px;
z-index: 100;
}
.menu ul li ul li {
visibility: hidden;
overflow: hidden;
width: 110px;/*サブメニューの幅*/
height: 0;
background:#041fb5;/*サブメニューの背景色*/
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
background:#08046c;/*ホバー時のサブメニューの背景色*/
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
visibility: visible;
overflow: visible;
height:35px;/*サブメニューの高さ*/
z-index: 10;
}
.menu * {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
お礼
ありがとうございます。 ulは、ブロック要素なのにそれ自体のサイズではなく、中の要素の縦のサイズで縦のサイズを決めるのですね。 横はwidthで出来ますが。