드롭 다운 메뉴 순수한 CSS 문제

드롭 다운을 만들려고하지만 수직으로 이동하거나 블록 할 수 없습니다. 다음은 HTML과 CSS입니다. 이 모든 일은 총알이있는 링크 목록을 만드는 것입니다. CSS드롭 다운 메뉴 순수한 CSS 문제

시작 HTML의 코드

<body onload="info()"> 
<div id="container"> 
<div id="wrapper"> 
<div id="logo"><img src="images/logo.png" alt="" height="80" width="400" /></div> 
<div id="header"> 
<div id="global-nav"> 
<ul> 
<li><a href="#One">One</a> 
<div class="global-subnav"> 
<ul> 
<li><a href="#A">A</a></li> 
<li><a href="#B">B</a></li> 
<li><a href="#C">C</a></li> 
</ul> 
</div> 
</li> 
<li><a href="#Two">Two</a> 
<div class="global-subnav"> 
<ul> 
<li><a href="#1">1</a></li> 
<li><a href="#2">2</a></li> 
<li><a href="#3">3</a></li> 
</ul> 
</div> 
</li> 
</ul> 
</div> </div>

의

@charset "utf-8"; 
/* CSS Document */ 

html { 
background-color: #d9d9d9; 
} 
body { 
margin:0; 
padding:0; 
height:100%; 
} 
#container { 
min-height:100%; 
    position:relative; 
} 
#header { 
    background:#06F; 
    padding:0px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the 
    */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:68%; 
    text-align:center;   /* Height of the footer */ 
    } 
/* other non-essential CSS */ 
#header p, 
#header h1 { 
    margin:0; 
    padding:10px 0 0 10px; 
} 
#footer p { 
    margin:-10px; 
    padding:0px; 
} 
#wrapper { 
width : 1025px; 
margin : 0 auto; 
} 
#logo h3 { 
float : right; 
margin-right : 100px; 
font-weight : bold; 
color : #00adef; 
height : 60px; 
line-height : 60px; 
} 
#logo img { 
outline : none; 
border : none; 
width: 500px; 
padding-left: 275px; 
} 
#global-nav { 
width: 121px; 
float: left; 
background: #e8eef4; 
} 
.global-subnav { 
width: 121px; 
background: #09C; 
} 

#global-nav a { 
color: #034af3; 
cursor: pointer; 
display: block; 
height: 40px; 
line-height: 40px; 
text-indent: 10px;    
text-decoration:none; 
font-weight: bold; 
width: 100%; 
} 

#global-nav ul{ 
background: yellow; 
padding: 0; 
margin: 0; 
} 

#global-subnav ul{ 
background: orangered; 
position: relative; 
top: -10px; 
left: 40px; 
} 

#global-nav li{ 
list-style: none; 
border-bottom: #5C87B2 solid; 
border-width: 3px; 
} 

#global-nav ul ul li{ 
display:none; 
} 

#global-nav li:hover { 
background: #fff; 
} 

#global-nav li:hover ul li{ 
display:block; 
} 
#rightnav { 
float: left; 
width: 220px; 
background: url(../images/bg.jpg) repeat-y; 
margin-top: 0px; 
margin-bottom: 0px 
} 
#innercontent { 
margin-top : 50px; 
} 
#minorcontent { 
padding : 5px; 
width : 200px; 
border : #00adef solid 2px; 
margin-top : 20px; 
float : right; 
margin-right : 10px; 
text-align : center; 
} 
#majorcontent { 
width : auto; 
font-size : 0.95em; 
background-color: #FFF; 
} 
#majorcontent h4 { 
height : 25px; 
line-height : 25px; 
padding-left : 10px; 
background-color : #06F; 
color: #FFBF00; 
} 
#majorcontent p { 
float : right; 
width : 910px; 
margin : -300px; 
padding : 0; 
white-space : pre; 
} 
#majorcontent img { 
border : #ccc solid 4px; 
} 
.clear { 
clear : both; 
} 
#NewFooter { 
padding-top:0px; 
text-align:right; 
list-style:none; 
} 
#NewFooterInner { 
width:auto; 
margin:0 auto; 
padding:20px 0 35px; 
overflow:hidden; 
} 
#NewFooterInner .sectionFooter { 
float:left; 
width:600px; 
padding-right:30px; 
overflow:hidden; 
margin-bottom:40px; 
} 
#NewFooterInner h2 { 
font-size:20px; 
border-bottom:1px solid #292929; 
padding:7px 0 12px; 
margin-bottom:2px; 
color:#FFBF00; 
} 
#NewFooterInner .sectionFooter ul li { 
padding:7px 0; 
border-bottom:1px solid #292929; 
color:#986123; 
font-size:10px; 
font-style:italic; 
} 
#NewFooterInner .sectionFooter ul li a { 
text-decoration:none; 
color:#515151; 
font-size:13px; 
font-style:normal; 
} 
#NewFooterInner #copyright { 
clear:both; 
padding-top:25px; 
margin-top:15px; 
position:relative; 
} 
#address { 
text-align : center; 
color : #000; 
margin : 0 auto; 
margin-top : 50px; 
background-color : #fff; 
padding : 20px; 
height : 700px; 
} 
#about { 
margin-top : 50px; 
padding : 20px; 
background-color : #fff; 
} 
#about h4 { 
width : 500px; 
border-bottom : 2px solid #09f; 
} 
#projvol { 
background-color : #fff; 
margin-top : 50px; 
height : auto; 
padding : 20px; 
} 
#projvol h4 { 
width : 500px; 
border-bottom : 2px solid #09f; 
} 
#projvol img { 
margin-left: 25px; 
padding : 0px 20px 20px; 
} 
#images { 
margin-top : 10px; 
margin-bottom : 100px; 
} 
#images h5 { 
margin-left : 50px; 
} 
#images img { 
border : #ccc solid 5px; 
float : left; 
margin-left : 50px; 
margin-top : 30px; 
} 
#social { 
position:absolute; 
right:160px; 
top:100px; 
} 

#social ul li { 
float:left; 
padding:0 5px; 
width:50px; 
list-style: none outside none; 
} 

#social ul li a { 
display:block; 
height:47px; 
width:47px; 
} 

#social ul li a img { 
border:none; 
margin-top:12px; 
margin-left:8px; 
}

끝이 좀 중요하지 않은 물건 때문에 따옴표를 무시 삭제.

출처

2013-07-17 Billy Smith

여기에있는 질문에서 메뉴에 대한 코드가 복사되었으며, 모든 코드는 드롭 다운이 아닌 동일한 링크 결과 목록을 가져옵니다. –

가능한 경우 jsFIddle 예제에 링크하십시오. 그리고 어느 누구도 귀하의 이나 귀하의 doctype 또는 귀하의 Google Analytics – dezman

@charset "utf-8"을 볼 필요가 없습니다. CSS 파일. 드림위버가 감지되었습니다! sidenote로서 나는 바이올린에 관한 문제를 볼 수 없으며, CSS가 전혀 적용되지 않은 것처럼 보이는 이미지가 보인다. – user1721135

html css 태그 다음에 '}'이 (가) 없으므로 이후의 css는 사용되지 않습니다. 그것을 추가하면 코드가 작동합니다.

출처

2013-07-17 21:38:00 Matto

이 게시물은 여기에 게시하도록 코드를 수정하는 동안 제거되었으므로 LOL은 무시합니다. –

뭔가를 사이트에 코딩하는 대신 imgr에 게시하려고하는 것처럼 보입니다. 인라인 CSS를 작동시켜야하거나 imgr의 웹 및 게시물에 넣을 수있는 것에 따라 전혀 작동하지 않을 수 있습니다. – Matto

드롭 다운 메뉴 순수한 CSS 문제

답변

관련 문제