CSS 드롭 다운 메뉴 표시 블록

드롭 다운 메뉴를 만들려고했습니다. 앵커 태그 위로 마우스를 가져 가면 표시됩니다. 나는 display : block을 사용할 수 없다는 것을 안다. 왜냐하면 a가 블록의 일부가 아니지만 어떻게해야할지 모르겠다. 도와주세요! 감사! 그러나 display : 블록이 작동하지 않습니다.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에 다음과 같이가 someting를 추가 할 필요가 있다고 생각 :

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

가 여기에 HTML 및 CSS입니다

출처

2013-05-14 23:04:41 daniel

작동! 고맙습니다! –

당신은 매우 환영합니다 :) – daniel

CSS 드롭 다운 메뉴 표시 블록

답변

관련 문제