当我调整浏览器大小时,自定义下拉列表工作不正常

时间:2013-12-26 20:29:42

标签: javascript jquery html css

请任何人帮助我。 当我调整浏览器大小时,崩溃下拉列表的后部会显示我不想要的内容(问题1.png)。  我希望当我调整浏览器的大小时,下拉菜单中的backpart会被隐藏到下拉列表中。

当悬停时,列表项没有显示,我想在悬停状态下显示图像。(问题2png)

问题实时链接: ![在此处输入图像说明] [1] http://tb.taslimk.tk/

另一个问题:)

2 个答案:

答案 0 :(得分:1)

看起来“style4.css”使用多个媒体查询来更改“FILTER BY INTEREST”元素的大小(.cd-dropdown)。这是一个例子:

@media (min-width: 768px) and (max-width: 979px) {
    .cd-dropdown > span {
            font-size: 12px;
            line-height: 4.2em;
    }
    .cd-dropdown ul li span {
        font-size: 12px;
    }
    .cd-dropdown, .cd-select {
        width: 220px;
    }
}

而全屏宽度.cd-dropdown的宽度我认为是300px。

我认为问题在于,当媒体查询负责时,列表元素(ul,li)(.cd-dropdown的子元素)也不会改变宽度。

我认为.cd-dropdown下面的ul只有100%的宽度设置:

.cd-dropdown ul {
    position: absolute;
    top: 0;
    width: 100%;
}

也许如果你将ul的宽度更改为与每个媒体查询块中的.cd-dropdown相同的px宽度,那么这可以解决你的问题(这个bug似乎围绕着ul的宽度这个事实)设置为100%)。

答案 1 :(得分:1)

有点hacky,但是在不必修改核心下拉列库的情况下处理此问题的一种方法是添加以下css规则来覆盖由库设置的内联样式。

.cd-dropdown ul li {
    width: 100% !important;
    left: 0 !important;
}
相关问题