Question

当我将鼠标悬停在菜单项“support”上时，文本开始不会出现在下拉菜单中。我一遍又一遍地检查了我的CSS。但我似乎无法找到它出错的地方。

HTML代码

<body>
<div class="site_header">   
    <div class="header_container">              
            <div class="header_logo">                   
            </div>
                <nav>
                    <ul class="header_menu">

                        <li><a href="#">Home</a></li>
                        <li><a href="#">Support</a>         
                            <ul class="header_sub_menu">
                                <li><a href="#"></a>Lorum ipsum</li>
                                <li><a href="#"></a>Anime</li>
                                <li><a href="#"></a>Gundam Seed</li>
                                <li><a href="#"></a>Fairytail</li>
                            </ul>                       
                        </li>
                        <li><a href="#">Forums</a></li>                         
                        <li><a href="#">Ask Question</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Feedback</a></li>
                    </ul>                   
                </nav>      
    </div>              
</div>

CSS代码

body {

line-height:    1;
background-color:   brown;
font-family:    Century Gothic;
}

ol, ul {

    list-style: none; 
}

.site_header{ background-color: black; height:  50px; position: relative; }

.header_container{

    height: 50px;
    width:  1100px;
    margin-left:  auto;
    margin-right: auto;
    position:     relative;
}

.header_menu {

    left:   90px;
    position:   relative;
    cursor: pointer;
}

li a {

    color:  #f2f2f2;
    display:    inline;
    float:  left;   
    padding:    12px 10px 22px 11px;
    margin: 0px 0px 0px 6px;
    font-size:  0.831em;
    text-decoration:    none;
}

li a:visited{

    color:  #f2f2f2;
}

ul li a:hover {

    background-color: #dadada;
    color:   black;
}


ul li ul{

    display:    none;
}

ul li:hover ul{

    display:    block;
    position:   absolute;
    color:  green;
}

ul li:hover ul li a{

    background-color:   #f2f2f2;
    color:  red;
    display:    block;
    width:  200px;  
}

ul li:hover ul li a:hover {

    background-color:   #989898;
}

Answer 1

看看这个片段：

<ul class="header_sub_menu">
    <li><a href="#"></a>Lorum ipsum</li>
    <li><a href="#"></a>Anime</li>
    <li><a href="#"></a>Gundam Seed</li>
    <li><a href="#"></a>Fairytail</li>
</ul>

我认为你的意思是：

<ul class="header_sub_menu">
    <li><a href="#">Lorum ipsum</a></li>
    <li><a href="#">Anime</a></li>
    <li><a href="#">Gundam Seed</a></li>
    <li><a href="#">Fairytail</a></li>
</ul>

Answer 2

问题不在于CSS - 它与HTML有关。您已将子菜单的锚标记的内容放在＆＃39; a＆＃39;之外。标签和作为＆＃39; li＆＃39;的直接孩子。标签。纠正这应该可以解决你的错误。

你可以查看下面的小提琴：

http://jsfiddle.net/E4G3Z/

这是更正后的副本：

<div class="site_header">   
<div class="header_container">              
        <div class="header_logo">                   
        </div>
            <nav>
                <ul class="header_menu">

                    <li><a href="#">Home</a></li>
                    <li><a href="#">Support</a>         
                        <ul class="header_sub_menu">
                            <li><a href="#">Lorum ipsum</a></li>
                            <li><a href="#">Anime</a></li>
                            <li><a href="#">Gundam Seed</a></li>
                            <li><a href="#">Fairytail</a></li>
                        </ul>                       
                    </li>
                    <li><a href="#">Forums</a></li>                         
                    <li><a href="#">Ask Question</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Feedback</a></li>
                </ul>                   
            </nav>      
    </div>              
</div>

替换此（您的代码）：

<ul class="header_sub_menu">
   <li><a href="#"></a>Lorum ipsum</li>
    <li><a href="#"></a>Anime</li>
     <li><a href="#"></a>Gundam Seed</li>
      <li><a href="#"></a>Fairytail</li>
 </ul>

有了这个（更正的）：

<ul class="header_sub_menu">
     <li><a href="#">Lorum ipsum</a></li>
     <li><a href="#">Anime</a></li>
     <li><a href="#">Gundam Seed</a></li>
     <li><a href="#">Fairytail</a></li>
  </ul>

下拉菜单无法正常工作

2 个答案: