私はcssを初めて使用し、Webサイトのメニューバーに取り組んでいますが、問題が何であるかを知っているだけで、それを修正する方法がわかりません.
ナビゲーション バーは、ホバーが発生し、左が -0 に設定されるまで、要素 Left -9999 を画面から非表示にするように設計されています。ただし、私のタブ「リンク」の 1 つに、5 列の本体があり、画面の右端にはみ出ています。左に移動する方法が必要です:-387px。style="left:-387;" ができない 使用していないときにメニューを非表示にしないため、div に直接。このメニュー項目を修正するための解決策を教えてください。
私は通常、スクリプトをここに投稿するか、jsfiddle を使用しますが、いずれかの多くのコードを使用します。ただし、ここでサイトを見つけることができます：
http://gdisinc.com/barker/default.php
問題の1つは次のとおりです。
.dropdown_1column {width: 175px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
/* I need this to be -387 but if I change this it will mess up all menus. */
left:-1px;
top:auto;
}
ここにメニュー項目を非表示にします
.dropdown_5columns {
/* This places the body of the menu item right below the menu bar. */
margin-top: 12px;
/*Containers with different sizes will hold the entire drop down content. I've chosen the tag names according to the number of columns they will contain. To hide the drop downs, we'll use absolute positioning with a negative left margin: */
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
border:1px solid #777777;
border-top:none;
/* Gradient background
The background fallback color is the same as the one used for the menu items. Modern browsers will display a gradient starting with #EEEEEE at the top (to match the parent menu item gradient) and ending with #BBBBBB at the bottom: */
background: #F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners
We'll again use rounded corners, except for the top left one: */
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
ここにチュートリアルがあります: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
「リンク」リンクだけに別のクラスを作成することで修正できると確信していますが、その方法がわかりません。