-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>

サブメニューは、div 内の ul エンティティ リースで構成されます。その先祖であるdiv内でのulの位置を変更したいと思います。「top:100px;」を追加します。「li.menu2 ul」セレクターに変更しても、何の影響もありません。「左」の値も良くありません。その ul をその div 内に再配置できない理由を誰か説明してもらえますか? div内の他の場所に移動するにはどうすればよいですか? 変更したい現在のページのスクリーンショットを添付します。どうもありがとう ！

4

2 に答える 2

0

padding-top: 100px を CSS に追加できます

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

それがあなたの意図したもの（そして私が理解したもの）である場合は、こちらをご覧ください http://jsfiddle.net/9NqDd/

于 2012-05-20T14:43:58.760 に答える
0

これを与えるdiv

position:relative;

追加する場合

padding-top:100px;

うまくいかない

margin-top:100px;

代わりは。

于 2012-05-20T17:34:11.457 に答える