2012-08-30 58 views
0

我是新來的CSS和我正在一個網站的菜單欄,我知道什麼問題只是不知道如何解決它。CSS類和左-387

導航欄旨在隱藏屏幕左側-9999的元素,直到出現懸停,然後將左側設置爲-0。但是,我的其中一個標籤「鏈接」有一個5列的正文從右側的屏幕移出。我需要一種方法來移動左邊:-387px。我不能做style =「left:-387;」直接在div上,因爲它不會在不使用時隱藏菜單。有人可以幫助我解決這個菜單項的解決方案嗎?

我通常會在這裏發佈腳本,或者使用jsfiddle,但要爲其中的任何一個編碼。然而,你可以在這裏找到該網站:

http://gdisinc.com/barker/default.php

這裏的問題與它的一個:

.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/

我相當確定修正是爲「鏈接」鏈接創建一個單獨的類,但我不知道該怎麼做。

回答

1

留下你離開屬性設置爲0,並使用顯示塊,而不是

#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 { 

    /* all menus are display:none by default */ 
    display:block; 
} 
+0

好吧,但我怎麼處理了移動框左側-387,如果我改變這個還有什麼我將不得不改變這個意志打破事情沒有? –

+0

哦,等等,也許我看看如果我使用顯示塊而不是0,並使用display none來顯示它,那麼我可以將左側設置爲-387正確? –

+1

您可以擁有一個默認左值,並且您在懸停時切換的所有內容都將是顯示屬性。 'block | none' – Ibu