“兆丰”菜单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

回答

相关问题