堆棧內存溢出
  簡體   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