HTML子菜单无效

时间：2014-06-14 16:44:53

标签： html css

我正在尝试使用下拉菜单创建一个网站。阅读了几个指南，甚至在这里搜索，菜单一直在做奇怪的事情。我尝试了很多东西，所以有些线条可能变得多余了。

子菜单不在菜单下面，而是在菜单旁边。

有人可以帮助我吗？ thx提前

HTML：

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
            <ul>
            <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
            <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
            </ul></li>

            <li><a href="#" accesskey="3" title="">About Us</a></li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a></li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>

            </li>
        </ul>
    </div> <!-- menu -->

的CSS：

#menu
{
    position: absolute;
    right: 0;
}

#menu ul
{
    display: inline-block;
    line-height: 1em;
    position: relative; /* naast elkaar*/
    right: 0;
    top: 2em;
    list-style: none;
    /*display: inline-table;*/
}
/*
#menu ul: after
{
        content: ""; 
        clear: both; 
        display: inline-block;
}*/

#Menu ul ul {
display: none;
}
/*
#Menu ul li:hover > ul 
{
    display: inline-block;
    }

*/
#menu ul li
{
    float: left; /* op een lijn */
    margin-left: 0.50em;
    padding: 1em 1.5em;
    letter-spacing: 0.20em;
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    color: #OOC;
    outline: 0;
}
#menu ul li:hover {
        background: #00F;
}
#menu ul li:hover a {
            color: #FFF;
}


#menu ul li a /*#menu ul li span*/
{
    display: inline-block
    margin-left: 0.50em;
    letter-spacing: 0.20em;
    text-decoration: none; /* geen onderlijning*/ 
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #OOC;
}


#menu ul ul /* submenu*/
{
    background: #00F;
    top: 100%;
    padding: 0;
    position: absolute; 
    visibility: hidden;
}

#menu ul:hover ul
{
    visibility:visible;
}
#menu ul ul li
{
    float: none; /*onder mekaar */
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    position: relative;
    color: #FFF;
}

2 个答案:

答案 0 :(得分：0)

这将对您有所帮助：

HTML 

<div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="3" title="">About Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
            <li><a href="#" accesskey="5" title="">Contact Us</a>
                <ul>
                    <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a></li>
                    <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a></li>
                </ul>
            </li>
        </ul>
    </div>

样式表

#menu {
  position: absolute;
  right: 0;
}
#menu ul {
  display: inline-block;
  line-height: 1em;
  position: relative;
  /*right: 0;*/

  top: 2em;
  list-style: none;
}
#menu ul li {
  float: left;
  padding: 1em 1.5em;
  letter-spacing: 0.20em;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  color: #00C;
  outline: 0;
}
#menu ul li a {
  display: inline-block;
  margin-left: 0.50em;
  letter-spacing: 0.20em;
  text-decoration: none;
  font-size: 0.90em;
  font-weight: 600;
  text-transform: uppercase;
  outline: 0;
  color: #00c;
}
#menu ul li:hover {
  background: #00F;
}
#menu ul li:hover a {
  color: #FFF;
}
#menu ul:hover ul {
  visibility: visible;
}
#menu ul ul {
  /*display: none;*/

  background: #00F;
  top: 100%;
  padding: 0;
  position: absolute;
  visibility: hidden;
}
#menu ul ul li {
  float: none;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  position: relative;
  color: #FFF;
}

以下是 Demo

答案 1 :(得分：0)

这当然不完整，但应该给你一个良好的开端。我建议的主要内容是关注你的ul li分组：JS Fiddle

HTML 

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="pagina2.html" accesskey="2" title="">Hardware</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="#" accesskey="3" title="">About Us</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="index_oud.html" accesskey="4" title="">sjabloon</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
        <li><a href="#" accesskey="5" title="">Contact Us</a>

            <ul>
                <li><a href="pagina2.html" accesskey="69" title="">Hardware2</a>
                </li>
                <li><a href="pagina2.html" accesskey="70" title="">Hardware3</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS 

#menu {
    position: absolute;
    right: 0;
}
#menu ul {
    display: inline-block;
    line-height: 1em;
    position: relative;
    /* naast elkaar*/
    right: 0;
    list-style: none;
    /*display: inline-table;*/
}
/*
#menu ul: after
{
        content: ""; 
        clear: both; 
        display: inline-block;
}*/
 #Menu ul li ul {
    height: 0;
}
#Menu ul li:hover > ul {
    height: 10px;
}
#menu ul li {
    /* op een lijn */
    padding: 1em;
    letter-spacing: 0.20em;
    font-size: 0.90em;

    text-transform: uppercase;
    color: #OOC;
    outline: 0;
}
#menu ul li:hover {
    background: #00F;
}
#menu ul li:hover a {
    color: #FFF;
}
#menu ul li a
/*#menu ul li span*/
 {
    letter-spacing: 0.20em;
    text-decoration: none;
    /* geen onderlijning*/
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #OOC;

}
#menu ul li ul 
/* submenu*/
 {
    width: 86px;
    background: #00F;
    height: 0;
    overflow: hidden;
    text-align: center;
    display: block;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
        position: absolute;
}
#menu ul:hover > li ul {
    height: 90px;
        width: 86px;
        padding: 20px;
}
#menu ul li ul li {
    /*onder mekaar */
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    color: #FFF;

}
相关问题
最新问题