ドロップダウンメニューを作成しようとしています。アンカータグにカーソルを合わせると表示されるようにしたいだけです。a がブロックの一部でない場合、display:block を使用できないことはわかっていますが、その方法はわかりません。私を助けてください！ありがとう！ただし、display: ブロックは機能しません。HTML と CSS は次のとおりです。
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Motrium - Home</title>
<script src="js/vendor/custom.modernizr.js"></script>
<link rel="stylesheet" href="css/james222.css" type="text/css">
</head>
<body style="background-color: #C1C1C1;">
<div class="wrapper">
<div class="form-brand">
<a class="brand" href="#">Motrium</a>
</div>
<ul class="brand-nav">
<li><a href="#">Home</a><br /></li>
<li><a href="#">About</a><br /></li>
<li><a href="#">Contact</a></li>
<li class="dropdown-holder"><a href="#">Downloads</a>
<ul class="dropdown-menu">
<li><a href="#">TEST</a></li>
</ul>
</li>
</ul><br />
<div class="form-login">
<input type="text" name="user_name" placeholder="Username" class="input-text-normal" style="width: 114px;">
<input type="password" name="user_pass" placeholder="Password" class="input-text-normal" style="width: 114px;">
<input type="submit" value="Login" class="input-button" style="width: 125px;">
<p class="form-text">Dont have an account yet? <a href="#">Register.</a></p>
</div><br />
<div class="form-views">
<!-- hitwebcounter Code START -->
<img src="http://hitwebcounter.com/counter/counter.php?page=4929727&style=0025& nbdigits=6&type=page&initCount=0" title="50 styles" alt="Website Views" border="0" >
</div>
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<!--
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
*
{
}
.wrapper
{
padding-top: 10px;
padding-bottom: 20px;
margin: 10px;
}
.brand
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
}
.brand-nav
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
width: 200px;
height: 200px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.brand-nav a:link{
text-decoration: none;
color: white;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.brand-nav a:visited{
color: white;
}
.brand-nav a:hover{
text-decoration: none;
color: black;
height: 55px;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
}
.brand-nav li{
list-style: none;
}
.input-text-normal
{
height: 25px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.input-button
{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
margin-top: 10px;
margin-bottom: 5px;
}
.form-views{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
height: 30px;
width: 200px;
text-align: center;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}
.form-login
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
text-align: center;
width: 200px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}
.form-text{
color: white;
font-size: 14px;
}
.form-text a:link{
text-decoration: none;
color: white;
}
.form-text a:visited{
color: blue;
}
.form-text a:hover{
color: black;
}
.form-brand{
width: 200px;
height: 45px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.dropdown-menu a:link{
color: white;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
}
.dropdown-menu a:hover{
display: block;
}
.dropdown-menu{
width: 110px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
text-align: center;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
display: none;
}
.dropdown-menu:hover{
display: block;
}