Question

我一直在尝试创建一个下拉菜单。我只是想要当我们将鼠标悬停在锚标签上时显示它。我知道我不能使用display：block当a不是块的一部分时，但我不知道怎么做。请帮我！谢谢！但显示：块不起作用。这是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;
}

Answer 1

我认为你需要在你的CSS中添加这样的东西，有点难以摆弄你的代码，因为有些基础知识我一无所知：

.dropdown-holder:hover .dropdown-menu{
    display:block;
}

CSS下拉菜单显示块

1 个答案: