CSSメニュー - 子アイテムの親の幅の変更を停止します

Question

私は2レベルのCSSメニューを持っています。両方のレベルを水平に表示する必要があります。

これはかなり設定されていますが、私が把握できない問題がいくつかあります。

1）私は、以下の要素と同じ幅を得てから、「プロジェクト」のリンクを停止することはできますか？ （「ライブ」と「ワーク」を組み合わせたもの）

2）「ライブ」と「ワーク」を「プロジェクト」の下に左揃えにすることはできますか？

これは私が達成したい最終的な結果である：

3）は、これを可能使用してインラインブロック要素の代わりに、フロートですか？代わりにそれらを使うべきですか？メニューを知ることは、ページの右上に絶対配置する必要があります。

JSFiddle：https://jsfiddle.net/v23xejtj

.menu-block--main  { position: absolute; top: 5%; right: 5%; 

    // level 1 
    ul     { list-style-type: none; margin: 0; padding: 0; 
    li     { float: left; background-color: green; } 
    li a    { display: block; color: #000; text-align: center; 
     padding: 14px 16px; text-decoration: none; text-transform: uppercase; } 
    li a:hover   { background-color: red; } 
    } 

    // level 2 
    ul li ul    { 
    li     { float: left; } 
    } 

} 

<nav class="menu-block--main"> 
    <ul class="main-menu"> 
    <li class="menu-item"><a>Projects</a> 
     <ul> 
     <li class="menu-item"><a>Live</a></li> 
     <li class="menu-item"><a>Work</a></li> 
     </ul> 
    </li> 
    <li class="menu-item"><a>Activities</a></li> 
    <li class="menu-item"><a>Team</a></li> 
    <li class="menu-item"><a>Blog</a></li> 
    <li class="menu-item"><a>Contact</a></li> 
    </ul> 
</nav> 

Answer 1

私も絶対的なサブメニューを設定することをお勧めので、メインメニュー項目がそれにサイズを変更しません。 float：left、display：inline-block、vertical-align：top、text-align：leftを削除することもできます。また、全体のメニューとサブメニューに背景を設定する必要があります。私が助けた

.menu-block--main { 
    background: #008000; 
} 

.menu-block--main ul{ 
    text-align: left; 
} 

.menu-block--main ul li{ 
    display: inline-block; 
    vertical-align:top; 
} 

.menu-block--main ul ul { 
    position: absolute; 
    width: 100%; 
    background: #008000; 
    top:100%; 
    left:0; 
} 

希望;）

Answer 2

はたぶん、あなたは、サブメニューを作る意味では、私はこのように考える：

.menu-block--main{ 
    ul.main-menu{ 
     background: #444; 
     text-align: center; 
     padding: 0; 
     margin: 0; 
     list-style: none; 

     li{ 
     font-family: 'Oswald', sans-serif; 
     font-size: 1.2em; 
     line-height: 40px; 
     text-align: left; 

     a{ 
      text-decoration: none; 
      color: #fff; 
      display: block; 
      padding-left: 15px; 
      border-bottom: 1px solid #888; 
      transition: .3s background-color; 
      &:hover{ 
      background-color: #005f5f; 
      } 
      &:active{ 
      background-color: #aaa; 
      color: #444; 
      cursor: default; 
      } 
     } 
     } 
     li{ 
     font-size: .8em; 
     } 
    } 
} 

が...うまくいけば、あなたに助けることができる