我是css的新手,我正在为一个网站制作一个菜单栏,我知道问题出在哪里,只是不知道如何解决它。
导航栏旨在将元素 Left -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/
我很确定解决方法是为“链接”链接创建一个单独的类,但我不知道该怎么做。