CSS：如何更改「ul」位置？

-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>position ul</title> 
<style type="text/css"> 

html, body, div, ul { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
#main { 
position:relative; 
width:950px; 
height:30px; 
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/ 
border:2px solid #8c8b4b; 
} 
#main li { 
width:92px; 
height:30px; 
float:left; 
list-style-type:none; 
border:2px solid red; 
} 
#main li a { text-decoration:none; } 
#main li ul li { 
width:400px; 
border:2px solid #8c8b4b; 
height:30px; 
} 
li.menu1 { background-image:url('images/men1.png'); } 
li.menu2 { background-image:url('images/men1.png'); } 
.menu2 li a { 
color:white; 
font-weight:bold; 
} 
li.menu2 div { 
position:absolute; 
margin-left:-999em; 
padding-top:200px; 
} 
li.menu2 ul { 
top:400px; 
list-style:none; 
margin:0; 
font-size:110%; 
} 
li.menu2:hover div { margin:0; } 
li.menu2:hover ul li { clear:left; } 
ul li ul.rounded-corner { 
border:2px solid red; 
height: 200px; 
width:776px; 
background-image:url(../banner/bg_to_sitepoint.gif); 
background-repeat:no-repeat; 
-webkit-border-radius:50px; 
-moz-border-radius:50px; 
border-radius:50px; 
} 
</style> 
</head> 
<body> 
<ul id="main"> 
<li class="menu1"><a href="#">menu item1</a></li> 
<li class="menu2">menu item2 
    <div> 
     <ul class="rounded-corner"> 
    <li><a href="#">submenu2 item1</a></li> 
    <li><a href="#">submenu2 item2</a></li> 
    <li><a href="#">submenu2 item3</a></li> 
    </ul> 
    </div> 
    </li> 
    </ul> 
</body> 
</html>

該子菜單由一個ul實體reesides組成。我想改變這個ul在其祖先中的位置：一個div。我加：「top：100px;」到「li.menu2 ul」選擇器並且沒有任何影響。「左」價值也不好。任何人都可以解釋我爲什麼我不能讓它重新定位在其'div？我怎樣才能讓它移動到div內的其他地方？附加是我想改變的當前頁面的屏幕截圖。非常感謝！

來源

2012-05-20 deotpit

您可以添加填充頂：100px的，以你的CSS

li.menu2 ul { 
    top:400px; 
    list-style:none; 
    margin:0; 
    font-size:110%; 
    padding-top:100px; 
}

看看這裏，如果這就是你的意思是什麼（我的理解） http://jsfiddle.net/9NqDd/

來源

2012-05-20 14:43:58

謝謝巴特。你的援助是有幫助的。 – deotpit

@deotpit：你的問題的最終解決方案是什麼？ –

給這個div

position:relative;

if add

padding-top:100px;

將無法正常工作嘗試

margin-top:100px;

代替。

來源

2012-05-20 17:34:11 Seb

CSS：如何更改「ul」位置？

回答

相關問題