html および css_html/css_WEB-ITnose を使用してドロップダウン ナビゲーション バー効果を作成する

　　引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢

 

　　通过观察了百度的首页，对于更多产品一栏，觉得可以不涉及JS便可写出下拉导航栏的效果

　　1.先设计出大体的框架

　　

• 新闻


• hao123


• 地图


• 视频


• 贴吧


• 登录


• 设置
  
  
  
  • 2
  
  
  • 2
  
  
  • 2
  
  
  • 2
  
  
  
  


• 更多产品
  
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  • 1
  
  
  
  

2. スタイルを初期化し、デフォルトの順序なしリストを変更します

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position:relative;
}

3. navの下のulをfloatにしてリストが同じ水平線上になるようにし、liとaのスタイルも同時に設定します

.nav ul{
ディスプレイ: ブロック;
フロート : 右;
位置: 相対;
}
.nav ul li{
ディスプレイ: インラインブロック;
パディング: 5px;
text-align: center;
border-left: 2px ソリッド # f2f2f2;
position:relative;
}

.nav ul li a{
color: #666;
}

4. 重要な手順の 1 つは、li の下の ul の表示属性を次のように変更することです。ホバーがない場合は非表示になり、同時にドロップダウン ボックスの li スタイルを設定してより自然になります

.nav ul li ul{
表示: none;
}
.nav ul li ul li{
height : 55px;
width: 50%;
border-left: none;
border-bottom: 2px Solid #f2f2f2;

}

5. 非表示の UL にカーソルを合わせると、その表示属性を変更して表示されます。 、絶対位置を使用して自然に見えるようにします

.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
Position:Absolute;
}

すべてのスタイル コード:

*{
パディング: 0;
マージン: 0;
}
.nav{
幅: 100%;
高さ: 50px;
表示: ブロック;
位置: 相対;
}
.nav ul{
ディスプレイ: ブロック;
フロート: 右;
位置: 相対;
}
.nav ul li{
ディスプレイ: インラインブロック;
パディング: 5px;
text-align: center;
border-左: 2px ソリッド #f2f2f2;
位置: 相対;
}
.nav ul li a{
color: #666;
}
.nav ul li ul{
表示: none;
}
.nav ul li ul li {
高さ: 55px;
幅: 50%;
border-left : none;
border-bottom: 2px Solid #f2f2f2;

}
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position:Absolute;
}

個人的には、いくつかの欠点があると思います:

1. 位置の絶対属性は自分自身に影響を与えます。 -適応ですが、それを正常に表示する方法が思いつきません。私の疑問を解決できる牛がもっと増えることを願っています。

2. もちろん方法は 1 つだけではありません。友人が他のアイデアを考えてくれて、そこから学べることを願っています。ありがとう!