在简单的模板菜单上添加一个css子菜单

问题描述：

我有一个模板，在网站内部有一个简单的菜单，我是一个用CSS的新手。我想在子菜单的正下方添加子菜单，并在子菜单的右侧上添加子菜单。这里是我的html代码：在简单的模板菜单上添加一个css子菜单

<div class="site-nav"> 
    <ul> 
    <li><a href="index.html"><span>Home</span></a></li> 
    <li><a href="UNNO.html"><span>A UNNO</span></a></li> 
    <li><a href="#" class="active"><span>Produtos</span></a> 
     <ul> 
     <li><a href="#">Product 1</a> 
      <ul> 
      <li><a href="#">Sub Product 1</a></li> 
      <li><a href="#">Sub Product 2</a></li> 
      <li><a href="#">Sub Product 3</a></li> 
      </ul> 
     </li> 
     <li><a href="Servicos.html"><span>Serviços</span></a></li> 
     </ul> 
    </ul> 
</div>

，这是属于菜单中的CSS。

.site-nav { 
    width:100%; 
    overflow:hidden; 
} 

.site-nav ul { 
    float: right; 
    background-color: #1e1a18; 
    height: 70px; 
    border-top: 1px solid #221d19; 
} 

.site-nav ul li { 
    font-size:1.08em; 
    float:left; 
    background:url(images/divider.gif) repeat-y right top; 
    padding-right:2px; 
} 

.site-nav ul li a { 
    color:#fff; 
    text-decoration:none; 
    display:block; 
    background:url(images/nav-bg.gif) no-repeat 21px 32px; 
    width:119px; 
    height:70px; 
} 

.site-nav ul li a span { 
    display:block; 
    padding:26px 0 0 35px; 
} 

.site-nav ul li a:hover, 
.site-nav ul li a.active { 
    background-color:#ed1c24; 
} 

.site-nav ul li.twitter { 
    background:none; 
    padding:23px 0 0 0; 
    border-right:1px solid #080808; 
    text-align:center; 
    width:102px; 
} 

.site-nav ul li.twitter a, 
    .site-nav ul li.twitter a:hover { 
    background:none; 
} 

.site-nav ul li.twitter a { 
    display:inline; 
}

使用类，如“有子”与子项目每个家长里并覆盖所有的分项与另一UL和使用CSS来隐藏他们，并表明悬停 – hengecyche

答

试试这个：

<nav> 
    <ul> 
     <li class="tabs"><a href="#">Home</a></li> 
     <li class="tabs"><a href="#">A UNNO</a></li> 
     <li class="tabs"><a href="#">Produtos</a> 
      <ul> 
       <li><a href="#">Sub Product 1</a> 
        <ul> 
         <li><a href="#">Sub Sub Product 1</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub Product 2</a></li> 
       <li><a href="#">Sub Product 3</a></li> 
      </ul> 
     </li> 
     <li class="tabs"><a href="#">Servicos</a></li> 
    </ul> 
</nav>

，并使用display: none;隐藏子菜单，只显示他们悬停。

JSFIDDLE

Kalpetros，我更换在html中的菜单代码，但我不明白，它是假设插入显示：无;在CSS上。更改代码创建2问题所有菜单已取消配置，子菜单不出现。请帮帮我！！！ –

在你的css中创建'.site-nav ul ul'选择器并添加'display：none;'。 – kalpetros

嗨Kalpetros！我创建你的例子。 site-nav ul ul { \t display：none; }在CSS文件中。菜单上没有结果。 e看到你使用li类标签，但它是在CSS？请帮忙！ –

在简单的模板菜单上添加一个css子菜单

相关推荐