Css 如何通过相对定位最佳地编码以跨越整个div

我正在尝试创建Tiffany&Co-styled filters选择器菜单。 见：

附件是指向我的JSFIDLE的链接：

每个'下拉'的宽度是自动的，我有通过CSS硬编码的立场问题

.filter-dropdown.gemstones .dropdown {
  /* Size & position */
    position: absolute;
    top: 32px;
    left: -182px;
    right: 0;
    width: 870px;
    padding-left: 172px;

    border: none;

    border-top: 1px dotted #000;
    border-bottom: 1px solid #000;
}

例如：点击材料>纯银-将导致将第二个下拉框向右推，从而弄乱我设置的位置

正如您所见，我使用非常原始的方法来定位下拉列表，使用left:-px；和衬垫来定位它们。有更好的方法吗

---

我对css不是很在行，而且还在学习，所以任何建议/建议都将不胜感激

你手中的小提琴似乎太复杂了。无论如何，您都在使用jquery，为什么不使用它来定位呢。我会在导航中使用链接，因为它们实际上就是链接，并使用ID将它们链接到页面的相关部分。这个alos简化了jquery。以下是我的粗略改编：

HTML

Javascript

/*Set Position of dropdowns*/
var mrgnLeft = $(".nav .materials").position().left + "px";
$("#lstMaterials").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .gems").position().left + "px";
$("#lstGems").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .price").position().left + "px";
$("#lstPrice").css("padding-left",mrgnLeft);


/*Show them on click*/
$(".nav a").click(function(){
     $("#dropDownContainer .dropdown").hide();
    console.log($(this).attr("href"));
    console.log( $($(this).attr("href")))
     $($(this).attr("href")).show();
    return false; //stops the native link behaviour
});

---

这会让你朝着正确的方向前进。您可以使用add\removeClassactive轻松地重新设置隐藏和显示，并根据需要添加CSS

我修改了HTML、CSS和Javascript

代码如下： 函数下拉过滤器{ 这1.dd=el； this.placeholder=this.dd.children'span'； this.opts=this.dd.find'ul.dropdown>li'； this.val=； 这个指数=-1； 这是一个重大事件； } DropDownFilter.prototype={ initEvents：函数{ var obj=这个； “单击”时的对象dd.函数事件{ $this.toggleClass'active'； 返回false； }; 对象选择“单击”功能{ var opt=$this； obj.val=opt.text； obj.index=opt.index； obj.placeholder.textobj.val； }; }, getValue:函数{ 返回此.val； $'.filter下拉列表'.removeClass'active'； }, getIndex:函数{ 返回此.index； }, } $function{ var dd=新的下拉过滤器$'fdd'； var dd=新的下拉过滤器$'fdd2'； var dd=新的下拉过滤器$'fdd3'； $'.filter下拉列表'.eachfunction{ var self=$this； 自宽自宽； }; $document.clickfunction{ //所有下拉列表 $'.filter下拉列表'.removeClass'active'； }; $.filter-dropdown.clickfunction{ //所有下拉列表 $'.filter下拉列表'.notthis.removeClass'active'； }; }; @进口urlhttp://fonts.googleapis.com/css?family=Lato:300, 400, 700; @进口urlhttp://fonts.googleapis.com/css?family=Lora; *，*：之后，*：之前{ -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } 正文，html{ 字体大小：100%； 填充：0； 保证金：0； } .过滤器下拉列表{ 线高：12px； 填充：0px； /*风格*/ 光标：指针； 大纲：无； /*字体设置*/ 字体系列：Lato； 字体大小：11px； z指数：9999； } .过滤器下拉列表。下拉列表：在{ 内容：； 位置：绝对位置； 左：0px； 顶部：50px； 右：0px； 底部：0px； 边框：1px实心EF； 边框顶部样式：虚线； z指数：-1； } .过滤器下拉列表.下拉列表{ 字体大小：正常； 边缘顶部：25px； -webkit过渡：所有0.2s易用性； -moz转换：所有0.2秒的易用性； -ms转换：所有0.2秒缓进； -o型过渡：所有0.2秒缓进； 过渡：所有0.2秒缓进； 列表样式：无； /*隐藏*/ 显示：无； 指针事件：无； -webkit边框右上角半径：0px； -moz边框半径右上角：0px； 边框左上右上：0px； } 梅因先生{ 线高：37px； 宽度：100%； 显示：表格； 位置：相对位置； } .main>div{ 显示：表格单元格； } .main>div:第一个孩子{ 宽度：120px； } 李先生{ 填充：0px； 边际：0px； } .过滤器下拉列表.下拉列表li a{ 显示：块； 填充：10px； 左侧填充：0px； 文字装饰：无； 颜色：999999； -webkit过渡：所有0.3版本都可以轻松过渡； -moz转换：所有0.3秒都会变慢； -ms转换：所有0.3秒都会变慢； -o型过渡：所有0.3秒都会变缓； 过渡：所有0.3秒放松； } .过滤器下拉列表.下拉列表li i{ 浮动：对； 颜色：继承； } .过滤器下拉列表.下拉列表李：a型的第一个{ } 。过滤器下拉列表。下拉列表li：最后一个类型a{ 边界：无； } /*悬停状态*/ 。过滤器下拉列表。下拉列表李：将鼠标悬停在a上{ 颜色：8BAB1； } /*活动状态*/ .filter-dropdown.active.dropdown{ 显示：块； 指针事件：自动； } 戒指7 材料 宝石 价格

---

具有固定宽度以过滤下拉列表类。。我用100px试过了，看起来效果不错。在你的小提琴中似乎有很多不相关的CSS。任何机会，你可以削减到什么是相关的。对不起，我很确定我把一个新的链接，但似乎是一样的。。。请访问：@Mr_Green是的，我知道如果我给它一个固定的宽度，它会工作，我想知道我是否可以让下拉列表覆盖整个宽度，而不必固定过滤器下拉类的宽度。你是说这样吗。加载页面时，获取这些菜单项的宽度，并使用javascript应用相同的宽度。

.nav
{
    position:relative;

}

.nav h4 
{
    display:inline-block;
    margin-right:2px;
}

.nav .count:before
{
    content:"(";

}

.nav .count:after
{
    content:")";
    margin-right:5px;
}

.nav a 
{
    display:inline-block;
    padding-right: 20px;
}

#dropDownContainer
{
    position:relative;
}

#dropDownContainer ul
{
    list-style-type:none;
    padding:0;
}

.dropdown {display:none;}

#dropDownContainer ul
{
    border-top:dotted 1px black;
    border-bottom:dotted 1px black;
    padding-top:10px;
    padding-bottom:10px;
}

/*Set Position of dropdowns*/
var mrgnLeft = $(".nav .materials").position().left + "px";
$("#lstMaterials").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .gems").position().left + "px";
$("#lstGems").css("padding-left",mrgnLeft);
mrgnLeft = $(".nav .price").position().left + "px";
$("#lstPrice").css("padding-left",mrgnLeft);


/*Show them on click*/
$(".nav a").click(function(){
     $("#dropDownContainer .dropdown").hide();
    console.log($(this).attr("href"));
    console.log( $($(this).attr("href")))
     $($(this).attr("href")).show();
    return false; //stops the native link behaviour
});