请帮我修复此菜单代码中的错误

时间：2015-04-15 10:18:50

标签： html css

我在线学习CSS，我是网页设计的新手。在这里需要一些专家意见，我可能写错了或愚蠢。请原谅我是初学者。

以下是我的CSS和HTML代码： 

    #menu {
    	float: left;
    	width: 1000px;
    	height: 30px;
    	background-color:#0066FF;
    	border-bottom: 1px solid #333;``
    }
    
    #menu ul {
    	float: left;
    	width: 1000px;
    	margin: 0;
    	padding: 7px 0 0 0;
    	list-style: none;
    }
    
    #menu ul li{
    	display:inline;
    }
    li ul {display: none;}
    li:hover ul {display: block; position:relative;}
    li:hover li a{background: #0066FF;}
    #menu ul li a{
    	float: left;
    	padding: 0 20px;
    	font-size: 12px;
    	font-weight: bold;
    	text-align: center;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #menu li a:hover, #menu li .current{
    	color: #FFFF00;
    }
    
    #menu ul li:hover ul{
        width: 150px;
    	white-space: nowrap
    	height: 10px;
    	text-align: center;
    	background:#0066FF;
    	}
<div id="menu">
    <ul>
      <li><a href="index.html"  class="current">Home</a></li>
      <li><a href="#">Quran</a>
      
     <ul>
      <li><a href="#">Translation</a></li>
        <li><a href="#">Tajweed</a></li>
        <li><a href="#">Tafseer</a></li>
        <li><a href="#">Qoutes</a></li>
      
      </ul>
      </li>
      <li><a href="#">Ahadees</a>
      <ul>
      <li><a href="#">Sahih Al-Bukhari</a></li>
        <li><a href="#">Sahih Muslim</a></li>
        <li><a href="#"> Sunan Abu-Dawud</a></li>
        <li><a href="#">al-Tirmidhi</a></li>
      <li><a href="#">al-Nasa'i</a></li>
        <li><a href="#">Ibn Maja </a></li>
      </ul></li>
      <li><a href="#">Wazaif</a>
        <ul>
      <li><a href="#">Allah's help</a></li>
        <li><a href="#">Rizzaq</a></li>
        <li><a href="#">Aulaad</a></li>
        <li><a href="#">Marriage</a></li>
      
      </ul></li>  
        <li><a href="#">Rights & Duties</a>
        <ul>
      <li><a href="#">As Parents</a></li>
        <li><a href="#">As Husband</a></li>
        <li><a href="#">As Wife</a></li>
        <li><a href="#">As Son</a></li>
        <li><a href="#">As Daughter</a></li>
     
      </ul></li> 
        <li><a href="#">Videos</a>
        <ul>
      <li><a href="#">Molana Tariq Jameel</a></li>
        <li><a href="#">Dr Zakir Naik</a></li>
        <li><a href="#">Dr Farhat Hashmi</a></li>
        <li><a href="#">Naat videos</a></li>
      
      </ul></li>
        <li><a href="#">Quran & Science</a></li>                     
      
        <li><a href="#">Library</a>
        <ul>
      <li><a href="#">Masnoon Duain</a></li>
        <li><a href="#">Tib-e-Nabvi</a></li>
        <li><a href="#">Tafseer</a></li>
        <li><a href="#">Islamic comerace</a></li>
      </ul></li>
      <li><a href="#">FAQs</a></li>
        <li><a href="#">Blogs</a></li>
      <li><a href="#">Contacts</a></li>            
    </ul> 
</div>

1 个答案:

答案 0 :(得分：0)

看起来问题是你没有正确定位子菜单。

由于未给出子菜单position:absolute，因此它们会保留在文档流中，因此在显示时会打扰其他元素。

添加position:absolute会将其从流程中删除并解决问题。

为了根据父li进行定位，li需要成为一个区块（因此display:inline-block）（您可以float li如果那是你的选择，那么也给予position:relative。

这是一个可以帮助你的建议。

#menu ul li {
    display:inline-block;
    position: relative;
}
li ul {
    display: none;
    position: absolute;
    top:100%;
    left:0;
}
li:hover ul {
    display: block;
}

JSfiddle Demo 

#menu {
  float: left;
  width: 1000px;
  height: 30px;
  background-color: #0066FF;
  border-bottom: 1px solid #333;
  ``
}
#menu ul {
  float: left;
  width: 1000px;
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
}
#menu ul li {
  display: inline-block;
  position: relative;
}
li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
li:hover ul {
  display: block;
}
li:hover li a {
  background: #0066FF;
}
#menu ul li a {
  float: left;
  padding: 0 20px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
  color: #FFFF00;
}
#menu ul li:hover ul {
  width: 150px;
  white-space: nowrap height: 10px;
  text-align: center;
  background: #0066FF;
}
<div id="menu">
  <ul>
    <li><a href="index.html" class="current">Home</a>
    </li>
    <li><a href="#">Quran</a>

      <ul>
        <li><a href="#">Translation</a>
        </li>
        <li><a href="#">Tajweed</a>
        </li>
        <li><a href="#">Tafseer</a>
        </li>
        <li><a href="#">Qoutes</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Ahadees</a>

      <ul>
        <li><a href="#">Sahih Al-Bukhari</a>
        </li>
        <li><a href="#">Sahih Muslim</a>
        </li>
        <li><a href="#"> Sunan Abu-Dawud</a>
        </li>
        <li><a href="#">al-Tirmidhi</a>
        </li>
        <li><a href="#">al-Nasa'i</a>
        </li>
        <li><a href="#">Ibn Maja </a>
        </li>
      </ul>
    </li>
    <li><a href="#">Wazaif</a>

      <ul>
        <li><a href="#">Allah's help</a>
        </li>
        <li><a href="#">Rizzaq</a>
        </li>
        <li><a href="#">Aulaad</a>
        </li>
        <li><a href="#">Marriage</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Rights & Duties</a>

      <ul>
        <li><a href="#">As Parents</a>
        </li>
        <li><a href="#">As Husband</a>
        </li>
        <li><a href="#">As Wife</a>
        </li>
        <li><a href="#">As Son</a>
        </li>
        <li><a href="#">As Daughter</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Videos</a>

      <ul>
        <li><a href="#">Molana Tariq Jameel</a>
        </li>
        <li><a href="#">Dr Zakir Naik</a>
        </li>
        <li><a href="#">Dr Farhat Hashmi</a>
        </li>
        <li><a href="#">Naat videos</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Quran & Science</a>
    </li>
    <li><a href="#">Library</a>

      <ul>
        <li><a href="#">Masnoon Duain</a>
        </li>
        <li><a href="#">Tib-e-Nabvi</a>
        </li>
        <li><a href="#">Tafseer</a>
        </li>
        <li><a href="#">Islamic comerace</a>
        </li>
      </ul>
    </li>
    <li><a href="#">FAQs</a>
    </li>
    <li><a href="#">Blogs</a>
    </li>
    <li><a href="#">Contacts</a>
    </li>
  </ul>
</div>

相关问题
最新问题