html - 絶対配置分割での 2 つの浮動ブロックの配置

Question

ここにコードがあります

http://jsfiddle.net/77NBM/12/

2 つの灰色の正方形 ("float 1" と "float 2") は、< li > "menu 3" に関連する絶対配置区分 "submenu_container" で隣り合わせに配置する必要があります。

誰かがそれを手に入れるのを手伝ってくれませんか? :(

どうも！

Answer 1

サブメニューの幅は、li 要素の幅によって制限されています。サブメニューに幅を追加するだけで、自然に float:left になるはずです。

CSS

#top{
    width:500px;
    height:300px;
    position:relative;
    margin:0px auto;
    background:#ccc;
}

#navigation{
    position:absolute;
    width:100%;
    height:50px;
    top:250px;
    left:0px;
    background:#f00
}
#main_menu{
    width:auto;
    height:50px;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

#main_menu li{
    width:100px;
    height:50px;
    margin-right:10px;
    float:left;
    background:#ff0;
    position:relative;
}

#main_menu li a{
    display:block;
    width:inherit;
    height:inherit;
}

.submenu_container{
    position:absolute;
    background:#00f;
    padding:5px;
    left:-5px;
    width:275px;
}

.submenu_item{
    width:100px;
    height:100px;
    float:left;
    background:#eee;
    margin:5px;
}

http://jsfiddle.net/77NBM/17/

ところで、あなたの html マークアップはエラーでいっぱいです。それを確認する必要があります。

HTML

<div id="top" class="center">
  <div id="navigation">
    <ul id="main_menu">
      <li>
        <a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2</a>
      </li>
      <li>
        <a href="#">Menu 3</a>
        <div class="submenu_container">
          <div class="submenu_item">
            Float 1
          </div>
          <div class="submenu_item">
            Float 2
          </div>
        </div>
      </li>
      <li>
        <a href="#">Menu 4</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

    #top{
    width:500px;
    height:300px;
    position:relative;
    margin:0px auto;
    background:#ccc;
}

#navigation{
    position:absolute;
    width:100%;
    height:50px;
    top:250px;
    left:0px;
    background:#f00
}
#main_menu{
    width:auto;
    height:50px;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

#main_menu li{
    width:100px;
    height:50px;
    margin-right:10px;
    float:left;
    background:#ff0;
}

#main_menu li a{
    display:block;
    width:inherit;
    height:inherit;
}

.submenu_container{
    width:auto;
    position:absolute;
    background:#00f;
    padding:5px;
    left:-5px;
}

.submenu_item{
    width:100px;
    height:100px;
    float:left;
    background:#eee;
    margin:5px;
}