「兆豐」菜單HTML CSS

-4

我想受孕的HTML菜單應用在SharePoint網站「兆豐」菜單HTML CSS

這是一個有點複雜的解釋，以便有一個架構 Picture of the Menu wanted

你有一個例子的CSS來實現？的HTML的結構是這樣的：

ID MENU \t \t \t \t  #zz12_TopNavigationMenu 
 
    UL (level 1) \t \t \t #zz13_RootAspMenu 
 
\t LI \t \t \t \t .static 
 
\t \t A 
 
\t \t SPAN 
 
\t \t \t SPAN \t \t .menu-item-text 
 
\t LI \t \t \t \t .static.dynamic-children 
 
\t \t A 
 
\t \t SPAN 
 
\t \t \t SPAN \t \t .menu-item-text 
 
\t \t \t UL \t (Level 2) \t \t \t .dynamic 
 
\t \t \t LI \t \t \t \t \t .dynamic dynamic-children 
 
\t \t \t \t A 
 
\t \t \t \t SPAN 
 
\t \t \t \t \t SPAN \t \t \t .menu-item-text 
 
\t \t \t \t \t UL (Level 3) \t .dynamic 
 
\t \t \t \t \t \t LI \t \t \t .dynamic 
 
\t \t \t \t \t \t A 
 
\t \t \t \t \t \t SPAN 
 
\t \t \t \t \t \t \t SPAN \t .menu-item-text 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t A 
 
\t \t \t \t \t \t  SPAN 
 
\t \t \t \t \t \t \t SPAN 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t LI - 
 
\t \t \t \t \t UL (Level 3) 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t 
 
\t \t \t \t LI - Practical information 
 
\t \t \t \t \t UL (Level 3) 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI

謝謝

來源

2016-02-17 Mathieu Debouvries

請格式化您的代碼 –

請分享您到目前爲止嘗試過的方法 –

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

-1

試試這個代碼

<div class="tabs"> 

    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab One</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab Two</label> 

     <div class="content">`enter code here` 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

</div>

的CSS

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute;`enter code here` 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
}

來源

2016-02-17 13:12:32 karam

歡迎來到堆棧溢出！雖然這可能在理論上回答這個問題，但解釋瞭如何解決OP的問題以及如何解決。 –

「兆豐」菜單HTML CSS

回答

相關問題