2016-04-14 46 views
1

我差不多在這裏完成w /我的菜單。不過,我有兩個問題。滾動和邊框CSS問題

  1. 我無法在列表的最後一項上添加1px實心邊框#fff。
  2. 我需要刪除左側的垂直滾動條。

這裏是我的CSS:

#nav li ul { 
    opacity: 0; 
    height: 0px; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #e74c3c; 
    color: #fff; 
    display: block; 
    list-style: disc; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    padding: 6px 8px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition: height 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

#nav li span:first-child { 
    margin-left: 32px; 
} 

asdasdasdasdasdasdasdassa

回答

1

好了,先刪除此:

#nav li:not(:last-child) { 
    border-bottom: 1px solid #fff; 
} 

用於添加邊框全部li甚至最後一個:

#nav li { 
    border-bottom: 1px solid #fff; 
} 

去除scroll做到這一點:

JS:

$('body, html').toggleClass('OverflowHidden'); 

CSS:

.OverflowHidden { 
    overflow: auto; 
} 

和去除雙邊框使用:

#nav li ul li:last-child { 
    border-bottom: none!important; 
} 

jsFiddle

+1

在一個側面說明,我不認爲這將是希望有溢出隱藏默認的HTML /身體,也許運可以將其添加爲切換類,當菜單可見 –

+0

爲邊框時,它將下拉菜單的最後一個子菜單的邊框加倍。在這裏查看屏幕截圖:http://prnt.sc/as6ibs –

+0

2.作爲您的旁註。那我該如何添加那個切換類呢?你能告訴我jQuery嗎? –