CSS菜單 - 停止改變父寬度的子項目

我有一個兩級CSS菜單。這兩個級別應該水平顯示。CSS菜單 - 停止改變父寬度的子項目

我有這個非常多的設置，但有幾個問題我不明白。

1）我可以阻止獲得相同的寬度爲以下元素的「項目」鏈接？（「Live」和「Work」結合起來）

2）我可以在「Projects」下左對齊「Live」和「Work」而不會搞亂上述結構嗎？

這是最終的結果我想實現：

3）這可能使用inline-block的元素，而不是浮動？我應該用這些嗎？知道菜單應該絕對定位在頁面的右上角。

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

來源

2016-12-15 Pascal Claes

我建議設置子菜單絕對一樣，所以主菜單項目將不會改變它的大小。你也可以刪除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; 
}

希望我幫助;）

來源

2016-12-15 10:01:46 Kate

應該不是'.menu-block - main ul li'有'position：relative;'這樣子菜單就會在它的父項下？ –

它可以是相對的或絕對的。雙向工作。它不能是靜態的。 – Kate

對不起，我沒有注意到它是關於「李」的。是的，李應該是相對的。對此很抱歉;） – Kate

-1

也許你的意思是，其子菜單，我想是這樣的：

.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; 
     } 
    } 
}

...希望可以幫助您

來源

2017-06-06 14:18:06

CSS菜單 - 停止改變父寬度的子項目

回答

相關問題