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;
}
お礼
回答ありがとうございましたm(^^)m >あと、机のものとかでボタンが押されてしまっているとかはないですよね（＾＿＾；） (笑)もしかすると ディスプレイの中の状態がそうなってるのかもですね(笑； 機嫌直してくれないかな(笑)。