CSS下拉菜單顯示塊

我一直在嘗試創建一個下拉菜單。我只是希望當我們將鼠標懸停在錨標記上時，它就會顯示它。我知道當a不是塊的一部分時，我不能使用display：block，但我不知道如何。請幫幫我！謝謝！但顯示：塊不起作用。下面是HTML和CSS：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; 
}

來源

2013-05-14 James L.

下面是一個例子：http://jsfiddle.net/kboucher/nrAPu/（第一個菜單是兩層深！） –

感謝您的代碼。但我正在尋找某人修改我的代碼並讓我瞭解我的錯誤。 –

我想你需要這樣的添加成纔到你的CSS，有點難以用你的代碼，因爲有一些基礎的東西我什麼都不知道不甘示弱：

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

來源

2013-05-14 23:04:41 daniel

作品！謝謝！ –

非常歡迎:) – daniel

CSS下拉菜單顯示塊

回答

相關問題