下拉菜单无法正常工作

当我将鼠标悬停在菜单项“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; 
}

来源

2014-06-23 user3763702

的问题是不是与CSS - 这是用HTML。您已将子菜单的锚定标记的内容放置在“a”标记之外，并作为“li”标记的直接子对象。纠正这个问题应该解决你的错误。

您可以检出以下小提琴：

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>

来源

2014-06-23 19:20:01 Larrydx

你是对的，我完全忽略了这一点。 Thnks – user3763702

看这个fragmet：

<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>

来源

2014-06-23 19:18:18 ubriaco

你是完全我应该看到这个。非常感谢！ – user3763702

下拉菜单无法正常工作

回答

相关问题