コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > ドロップダウン メニューの行が元の行よりも長くならず、効果がより良くなるように CSS コードを変更する方法_html/css_WEB-ITnose

ドロップダウン メニューの行が元の行よりも長くならず、効果がより良くなるように CSS コードを変更する方法_html/css_WEB-ITnose

WBOY
リリース： 2016-06-21 09:33:42
オリジナル
1142 人が閲覧しました

ドロップダウン ナビゲーション コードにより、ドロップダウン ナビゲーションの水平線がクリックされるか、効果と同じサイズになります

/* MENU */

#main-menu-1
{
float: left; : 0 0 0 -30px;
フォントの太さ: 太字
.usoft-menu-dropdown ul
{ font-size: 14px; ;
z-index: 9999;
}

/*
レベル 1
*/
.usoft-menu-dropdown
{

}
.usoft-menu-dropdown li
{
フォント-サイズ:100%;
ズーム: 1;
背景: 透明;
.usoft-menu-dropdown a:hover
{
color: #fff; :active
{
color : #fff;
.usoft-menu-dropdown li a
{
パディング: 10px 12px;
z-index:9999;
.usoft-menu-dropdown li:last-child a
{
border-right: none;
}
/* IE では動作しません */
.usoft-menu-dropdown li.hover, .usoft-menu-ドロップダウン li:hover
{
色: #dee;
位置: 相対;
.usoft-menu-dropdown li.hover a
{
色: #dee;

}

。 usoft-menu-dropdown li a:hover
{
背景: #70A8DB;
カラー: #fff; }

/*
レベル 2
*/
.usoft-menu-dropdown ul
{
width: 115px ;
可視性: 非表示;
位置: 絶対;
パディング: 0;
マージン: 0; 96%;
背景: #4484C1;
フロート: なし;


}

/* IE 6 および 7 はインライン ブロックが必要です */ .usoft-menu-dropdown ul li a
{
width : 100%;
display: inline-block;
border-top:1px Solid #ccc; }

/*
LEVEL 3
*/
.usoft-menu-dropdown ul
{ text -decoration:none ;
left: 100%;

.usoft-menu-dropdown li:hover >



ディスカッションに返信)

自分で下にもう 1 つ描いてください


親タグをposition:relativeに設定します
関連ラベル：
怎么修改css代码 使下拉菜单中的线不长于本来的 效果要好点的
ソース：php.cn
前の記事：ext4 を使用して this_html/css_WEB-ITnose のようにレイアウトします 次の記事：このinterface_html/css_WEB-ITnoseの実装方法を教えてください
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2069
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2234
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1877
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1761
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1790
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート