關於二級菜單

這個二級菜單要實現的效果是這樣的html
<!DOCTYPE html>spa
 
 002. 
 <html lang="en"> 
 
 003. 
 <head> 
 
 004. 
 <meta charset="UTF-8"> 
 
 005. 
 <title>Document</title> 
 
 006. 
 <style> 
 
 007. 
 *{ 
 
 008. 
 margin: 0; 
 
 009. 
 padding: 0; 
 
 010. 
 } 
 
 011. 
 ul{ 
 
 012. 
 list-style: none; 
 
 013. 
 } 
 
 014. 
 a{ 
 
 015. 
 text-decoration: none; 
 
 016. 
 } 
 
 017. 
 .clearfix:after{ 
 
 018. 
 content: '.'; 
 
 019. 
 height: 0; 
 
 020. 
 display: block; 
 
 021. 
 visibility: hidden; 
 
 022. 
 clear: both; 
 
 023. 
 } 
 
 024. 
 .clearfix{ 
 
 025. 
 zoom:1; 
 
 026. 
 } 
 
 027. 
 .nav{ 
 
 028. 
 position: relative; 
 
 029. 
 margin-left: 10px; 
 
 030. 
 } 
 
 031. 
 .nav a{ 
 
 032. 
 display: block; 
 
 033. 
 padding: 0 10px; 
 
 034. 
 width: 80px; 
 
 035. 
 line-height: 40px; 
 
 036. 
 text-align: center; 
 
 037. 
 cursor: pointer; 
 
 038. 
 color: white; 
 
 039. 
 } 
 
 040. 
 .nav li{ 
 
 041. 
 float: left; 
 
 042. 
 } 
 
 043. 
 .nav>li{ 
 
 044. 
 background: rgb(18, 104, 191); 
 
 045. 
 border-right: 1px solid #fff; 
 
 046. 
 } 
 
 047. 
 .nav ul{ 
 
 048. 
 display: none; 
 
 049. 
 background: #ccc; 
 
 050. 
 position: absolute; 
 
 051. 
 top: 40px; 
 
 052. 
 } 
 
 053. 
 .nav ul li a{ 
 
 054. 
 color: #000; 
 
 055. 
 } 
 
 056. 
 .nav li:hover { 
 
 057. 
 background: rgba(18, 104, 191, 0.8); 
 
 058. 
 } 
 
 059. 
 .parent:hover ul{ 
 
 060. 
 display: block; 
 
 061. 
 } 
 
 062. 
 </style> 
 
 063. 
 </head> 
 
 064. 
 <body> 
 
 065. 
 <ul class="nav clearfix"> 
 
 066. 
 <li> 
 
 067. 
 <a href="">首頁</a> 
 
 068. 
 </li> 
 
 069. 
 <li> 
 
 070. 
 <a href="">貸款資助</a> 
 
 071. 
 </li> 
 
 072. 
 <li class="parent"> 
 
 073. 
 <a>思想教育>></a> 
 
 074. 
 <ul class="clearfix"> 
 
 075. 
 <li> 
 
 076. 
 <a href="">政治解讀</a> 
 
 077. 
 </li> 
 
 078. 
 <li> 
 
 079. 
 <a href="">政治解讀</a> 
 
 080. 
 </li> 
 
 081. 
 </ul> 
 
 082. 
 </li> 
 
 083. 
 <li class="parent"> 
 
 084. 
 <a>隊伍建設>></a> 
 
 085. 
 <ul class="clearfix"> 
 
 086. 
 <li> 
 
 087. 
 <a href="">政治解讀</a> 
 
 088. 
 </li> 
 
 089. 
 <li> 
 
 090. 
 <a href="">政治解讀</a> 
 
 091. 
 </li> 
 
 092. 
 <li> 
 
 093. 
 <a href="">政治解讀</a> 
 
 094. 
 </li> 
 
 095. 
 <li> 
 
 096. 
 <a href="">政治解讀</a> 
 
 097. 
 </li> 
 
 098. 
 </ul> 
 
 099. 
 </li> 
 
 100. 
 <li> 
 
 101. 
 <a href="">學風建設</a> 
 
 102. 
 </li> 
 
 103. 
 <li> 
 
 104. 
 <a href="">校園服務</a> 
 
 105. 
 </li> 
 
 106. 
 <li> 
 
 107. 
 <a href="">下載中心</a> 
 
 108. 
 </li> 
 
 109. 
 <li> 
 
 110. 
 <a href="">金石灘</a> 
 
 111. 
 </li> 
 
 112. 
 </ul> 
 
 113. 
 </body> 
 
 114. 
 </html> 

  題目看起來是一個比較簡單的效果實際上問題仍是存在的。 

    
總結一哈：3d
1.實現橫向導航條，水平排列有兩種方法。一種是float:left，一種是display:inline-block。優勢是：都能實現該效果。code
缺點是：都有兼容問題。htm

  清楚浮動的兩種方法是」 
//第一種 
  02. 
  .clearfix:after{ 
 
 
  03. 
  content: '.'; 
 
 
  04. 
  height: 0; 
 
 
  05. 
  display: block; 
 
 
  06. 
  visibility: hidden; 
 
 
  07. 
  clear: both; 
 
 
  08. 
  } 
 
 
  09. 
  .clearfix{ 
 
 
  10. 
  zoom:1; 
 
 
  11. 
  } 
 
 
  12. 
    
 
 
  13. 
  //第二種 
 
 
  14. 
  .clearfix{ 
 
 
  15. 
  overflow:hidden; 
 
 
  16. 
  zoom:1; 
 
 
  17. 
  } 
 
 
  第二種有些缺點：好比如今就不能用，由於子菜單須要經過定位溢出父元素，overflow:hidden;的話致使溢出不顯示。因此仍是選擇用第一種。 
 