CSS：子菜单对齐和样式（严格CSS;没有JavaScript）

我想让我的第一个菜单工作。我从CSS Menu without javascript得到的基础知识。我试图尽可能简单。我得近看什么，我希望它看起来（不正是我真的希望它看起来像）：CSS：子菜单对齐和样式（严格CSS;没有JavaScript）

http://jsfiddle.net/EjXgU/2/

的主要问题是子菜单。它们叠在一起，而不是在父菜单的右侧。此外，子菜单的第一层不会堆叠在主菜单上的行的正下方，而是位于其中。

我能够注意到的另一个问题，我想添加一个rgba background-color（透明度）。但是，对于每个子菜单级别，透明度都会改变。

我也接受任何CSS3技巧，使它看起来 “华而不实” 和花式=）

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Title: css-menu-without-javascript</title> 
</head> 
<body> 

    <nav> 
     <ul id="menu"> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" class="normaltip" title="Units">With sub-menus --&gt;</a> 
      <ul class="submenu"> 
      <li><a href="...">Submenu 1</a></li> 
      <li><a href="...">Submenu 2 --&gt;</a> 
       <ul class="submenu"> 
       <li><a href="...">Sub-submenu 1</a></li> 
       <li><a href="...">Sub-submenu 2</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li><a href="#" title="Future Residents">Menu item 3</a></li> 
     <li><a href="#" title="Current Residents">With sub-menus --&gt;</a> 
      <ul class="submenu"> 
      <li><a href="...">Submenu 3</a></li> 
      <li><a href="...">Submenu 4 --&gt;</a> 
       <ul class="submenu"> 
       <li><a href="...">Sub-submenu 3</a></li> 
       <li><a href="...">Sub-submenu 4 --&gt;</a> 
        <ul class="submenu"> 
        <li><a href="...">Sub-sub-submenu 1</a></li> 
        <li><a href="...">Sub-sub-submenu 2</a></li> 
        </ul> 
       </li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li><a href="#" title="Contact Us">Menu item 3</a></li> 
     </ul> 
    </nav> 

</body> 
</html>

CSS：

/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/ 
#menu li>ul { display: none; } 
#menu li:hover>ul { display: block; } 
/*End of Nathan MacInnes' code*/ 


nav { position: relative; } 
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;} 
#menu a { 
    text-decoration:none; 
    font-size: 20px; 
    color:#191919; 
    padding:10px; 
} 
.submenu { background-color: rgba(0,0,0,0.5); }

来源

2012-06-07 Omar

如果你想CSS-仅下拉菜单，然后检查Son of Suckerfish。这几乎是实现这种目标的事实上的方式。

有是上使用JavaScript位来解决早期版本的Internet Explorer的缺乏伪元素的支持，但我觉得这是IE7及以下，这样或许可以被丢弃，这取决于支持什么水平你我们希望可以使用IE <等浏览器。其他浏览器（Firefox，Chrome，Safari，Opera等）只会显示菜单和功能，仅适用于CSS。

来源

2012-06-07 09:13:10

你可以尝试

.submenu { background-color: rgba(0,0,0,0.25); 
    margin-left: 25px;}

透明度val ue是添加剂—子菜单中的子菜单会获得添加两次的子菜单，因此第二个子菜单将不太透明。以较低的值开始可以有用。

添加边距会将文本置于右侧，我更喜欢每个子菜单“拥抱”自己的孩子的方式。

http://jsfiddle.net/EjXgU/3/

来源

2012-06-07 09:08:52

CSS：子菜单对齐和样式（严格CSS;没有JavaScript）

回答

相关问题