jsBin live demo

Question

当我将鼠标悬停在导航菜单类型对象上时，我有一个子菜单。现在，我的主导航菜单看起来像......

<div id= "navbar">
    <ul>
        <li><a href= "#" class= "navlink" id= "first"> First
              <div class= "firstsubmenu">
                    <ul>
                         <li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
                         <li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
                         etc...
                    </ul>
              </div></a></li>
         <li><a href= "#" class= "navlink" id="second"> Second
             <div class= "secondsubmenu">
                <ul>
                    ..and so on 
    </ul>
</div>

现在，我的CSS看起来像

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}

.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

.navlink:hover 
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited 
{
background-color:#ADD8E6;
color:#FFFFFF;
}

在我尝试在子菜单中创建一个可点击链接之前，所有内容都显示完美。 IE：firstsubmenu完美地出现了。它的css是

.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red; 
width : 930px;
height : 25px;
z-index : 10;
}

但是现在我添加了链接（在块中创建了每个列表元素），firstsubmenu不再出现。每个链接的CSS看起来像这样

.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

但正如我所说，子菜单甚至不再出现。我意识到这是一个很长的帖子，但任何建议都会很棒。

Answer 1

您可以使用以下css并创建基于纯CSS的菜单。

的CSS：

body { padding: 3em; }
#navbar *  { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px; }

#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li  { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 120px;
    }

#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul { 
    display:block; 
    }
#navbar:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 120px;
    margin-top: -20px;
    }

结构：

<div id="navbar">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Abous Us &nbsp; &nbsp; &#187;</a>
            <ul>
            <li><a href="#">About us 1</a></li>
            <li><a href="#">About us 2 &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                </ul>
            </li>
        </ul>

    </li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Menus &nbsp; &nbsp;  &#187;</a>
        <ul>
            <li><a href="#">Menus 1</a></li>
            <li><a href="#">Menus 2 &nbsp; &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">Menus 2-1</a>
                    <li><a href="#">Menus 2-2</a>
                    <li><a href="#">Menus 2-3</a>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Feedback</a></li>

</ul>

Answer 2

jsBin live demo

我必须修复HTML中的大量错误。这是css：

#navbar ul{
  list-style:none;
  margin:0; padding:0;
  display:table;
}
#navbar li{
  top:0px;
  background:#bbf;
  display:inline-block;
    width:100px;
}
#navbar li ul li{
  display:none;
}
  #navbar li:hover li{
    display:block;
  }

固定的HTML：

  <div id="navbar">
    <ul>
        <li>
             <a href="#" class="navlink" id="first"> First</a>
             <ul class="firstsubmenu">
                  <li><a href="#">1. option</a></li>
                  <li><a href="#">2. option</a></li>         
             </ul>
        </li>
        <li>
             <a href= "#" class= "navlink" id="second"> Second</a>
             <ul class="secondsubmenu">
                  <li><a href="#">1. option</a></li>
                  <li><a href="#">2. option</a></li> 
             </ul>
        </li>
    </ul>
</div>

现在，在它工作之后，无论你想要什么，都可以使用颜色在链接和图片中也使用alt标签，它可以提高您的搜索引擎优化和警惕性。

css / html中的子菜单

2 个答案:

jsBin live demo