正如標題所示，我正試圖移動邊框菜單中的菜單。我對這一點很陌生，因爲他們在理論上的聯繫，我認爲這將是類似的。 {position：absolute，然後我會選擇我希望他們去的地方。最重要的是，還有一個我需要隨之移動的子菜單。有任何想法嗎？謝謝！我想將菜單移到邊界內的右下角。如何移動「菜單邊框」內的菜單

<!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正在試圖風格<li>這是#navigation的孩子是一個孩子<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你是什麼意思取代？ –

對不起，我發現了。 .sub li –

如何移動「菜單邊框」內的菜單

回答

JSFiddle Demo

更新CSS：

相關問題

`JSFiddle Demo`