제목에서 말한 것처럼 테두리 메뉴 안에 메뉴를 이동하려고합니다. 나는 이것에 초보적이며, 이론적으로 링크가되어 있기 때문에 나는 그것이 비슷한 것이라고 생각했다. {위치 : 절대적으로 나는 그들이 내가 원하는 곳을 선택한다. 이것의 위에, 그것으로 또한 움직일 필요가있는 서브 메뉴가있다. 어떤 아이디어? 감사! 국경 안에서 오른쪽 아래로 메뉴를 옮기고 싶습니다."메뉴 테두리"내에서 메뉴를 이동하는 방법

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="stylesheet" type="text/css" href="videos.css" /> 
<link rel="stylesheet" type="text/css" href="vines.css" /> 
<title>Puppy Power</title> 
</head> 
<body> 
     <div id="page"> 
<header></header> 
     <div id="dog logo"> 
    </div> 

<ul id="navigation"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="videos.html">Videos</a> 
      <ul class="sub"> 
       <li><a href="vines.html">Vines</a></li> 
       <li><a href="#">Pugs</a></li> 
       <li><a href="#">Failing Dogs</a></li> 
       <li><a href="#">Crazy Dogs</a></li> 
       <li><a href="#">Funny Dogs</a></li> 

      </ul> 
     </li> 


     <li><a href="#">Photographs</a></li>  
     <li><a href="#">Articles</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

<div id="hero"><h1><b>HERO</b></h1></div> 


<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div> 

<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div> 

<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div> 

<div id="content"><h1><b>CONTENT</b></h1></div> 

<div id="footer"><h1><b>FOOTER</b></h1></div> 

</body> 
</html> 

#page { 
    max-width: 850px; 
    min-width: 840px; 
    min-height: 1550px; 
    max-height: 1600px; 
} 

* { 
    margin: 0px; 
    padding: 0px; 
} 



#navigation { 
    border: 1px solid #89cFF0; 
    width: 813px; 
    height: 187px; 
    margin-left: 5px; 

} 



ul #navigation, .sub { 
    list-style-type: none; 


} 

ul #navigation li { 
    border: 1px solid #89cFF0; 
    width: 125px; 
    text-align: center; 
    position: relative; 
    float: left; 
    list-style-type: none; 
} 

ul #navigation a { 
    text-decoration: none; 
    display: block; 
    width: 125px; 
    height: 25px; 
    line-height: 25px; 
    border: 1px solid #89cFF0; 
} 

ul #navigation li:hover > a { 
    background-color: #89cFF0; 
} 



#hero { 
    width: 813px; 
    height: 408px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    margin: 5px 0px 0px 0px; 
    text-align: center; 
    color: red; 

} 

#topvideo { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 



} 

#topphoto { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 

} 

#toparticles { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 
} 

#content { 
    width: 813px; 
    height: 310px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    margin: 0px 0px 0px 0px; 
    text-align: center; 
} 

#footer { 

    width: 813px; 
    height: 100px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    margin: 5px 0px 0px 0px; 
    text-align: center; 
}

2014-07-26 Benjamin Sunderland

당신의 CSS의 문제는 당신이 그것을 가기로되어 있지 않습니다 #navigation을 배치 유지하여 선택기에 있고 당신의 CSS를 파괴한다. 예를 들어, 리튬에 대한 규칙이 있습니다 :

ul #navigation li { 
    border: 1px solid #89cFF0; 
    width: 125px; 
    text-align: center; 
    position: relative; 
    float: left; 
    list-style-type: none; 
}

을 그리고 HTML은 이것이다 :

<ul id="navigation"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="videos.html">Videos</a> 
      <ul class="sub"> 
       <li><a href="vines.html">Vines</a></li> 
       <li><a href="#">Pugs</a></li> 
       <li><a href="#">Failing Dogs</a></li> 
       <li><a href="#">Crazy Dogs</a></li> 
       <li><a href="#">Funny Dogs</a></li> 

      </ul> 
     </li> 


     <li><a href="#">Photographs</a></li>  
     <li><a href="#">Articles</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul>

귀하의 CSS 아이가 #navigation의 자식 인 <li> 스타일을 시도 <ul>인데 ul이 #navigation이므로 아무 것도 없습니다. 이 대신에 같이 선택해야합니다

#navigation li { 
    border: 1px solid #89cFF0; 
    width: 125px; 
    text-align: center; 
    float: left; 
    list-style-type: none; 
}

`JSFiddle Demo`

업데이트 CSS를 :

#page { 
    max-width: 850px; 
    min-width: 840px; 
    min-height: 1550px; 
    max-height: 1600px; 
} 

* { 
    margin: 0px; 
    padding: 0px; 
} 



#navigation { 
    border: 1px solid #89cFF0; 
    width: 813px; 
    height: 187px; 
    margin-left: 5px; 

} 



#navigation , .sub { 
    list-style-type: none; 


} 

#navigation li { 
    border: 1px solid #89cFF0; 
    width: 125px; 
    text-align: center; 
    float: left; 
    list-style-type: none; 
} 

#navigation a { 
    text-decoration: none; 
    display: block; 
    width: 125px; 
    height: 25px; 
    line-height: 25px; 
    border: 1px solid #89cFF0; 
} 

#navigation li:hover > a { 
    background-color: #89cFF0; 
} 



#hero { 
    width: 813px; 
    height: 408px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    margin: 5px 0px 0px 0px; 
    text-align: center; 
    color: red; 

} 

#topvideo { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 



} 

#topphoto { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 

} 

#toparticles { 
    width: 267px; 
    height: 370px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    display: inline-block; 
    vertical-align:top; 
    text-align: center; 
    margin: 5px 0px 5px 0px; 
} 

#content { 
    width: 813px; 
    height: 310px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    margin: 0px 0px 0px 0px; 
    text-align: center; 
} 

#footer { 

    width: 813px; 
    height: 100px; 
    border-top: 1px solid #89cff0; 
    border-bottom: 1px solid #89cff0; 
    border-left: 1px solid #89cff0; 
    border-right: 1px solid #89cff0; 
    margin: 5px 0px 0px 0px; 
    text-align: center; 
}

출처

2014-07-26 17:15:34

그 주셔서 감사합니다. 문제는 현재 하위 메뉴를 대체하고있는 것입니다. 하위 메뉴를 따르려면 어떻게해야합니까? –

@BenjaminSunderland 대체하는 것은 무엇을 의미합니까? –

죄송합니다. . 부 리 –

"메뉴 테두리"내에서 메뉴를 이동하는 방법

답변

JSFiddle Demo

업데이트 CSS를 :

관련 문제

`JSFiddle Demo`