堆栈内存溢出
  繁体   English   中英

CSS下拉菜单显示块

[英]CSS Dropdown menu display block

 原文  2013-05-14 22:59:22  5   1    html/ css

问题描述

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

1 个解决方案

解决方案1
 1  2013-05-14 23:04:41

我认为您需要在CSS中添加诸如此类的东西，这有点麻烦您的代码，因为有些基础知识我一无所知： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS下拉菜单显示问题 HTML/CSS 下拉菜单不重叠或显示在块中 CSS悬停在Keep菜单显示块上 使用CSS水平显示下拉菜单 悬停链接时不显示 CSS 下拉菜单 CSS 下拉菜单无法正确隐藏/显示 HTML5和CSS3下拉菜单显示错误 CSS下拉菜单在缩进时缩进 下拉菜单显示问题 水平显示下拉菜单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM