CSS下拉導航鏈接狹窄

我試圖創建一個響應式下拉CSS菜單，我有一個媒體查詢針對移動設備（760像素）。我試圖讓所有的鏈接佔據整個寬度，這很好，但問題是當寬度小於760像素時顯示下拉菜單時，下拉菜單中的所有鏈接都侷促導入導航鏈接。我想知道如何解決這個問題，因爲我一直在想很久沒有找到解決方案。我想讓服務的下拉菜單直接位於服務下方，最後一個聯繫鏈接位於下拉菜單下方。這就是問題所在：CSS下拉導航鏈接狹窄

下面是HTML和CSS，以及到JSFiddle的鏈接。

HTML：

<div class="wrapper"> 
     <ul class="links"> 
     <li id="active"><a href="#" class="link">home</a> 
     </li><li><a href="#" class="link">about</a> 
     </li><li><a href="#" class="link">services</a> 
      <ul class="links"> 
       <li><a href="#" class="link2">web development</a> 
       </li><li><a href="#" class="link2">design templates</a> 
       </li><li><a href="#" class="link2">networking</a> 
       </li><li><a href="#" class="link2">custom builds</a> 
       </li> 
      </ul> 
     </li><li><a href="#" class="link">contact</a></li> 
     </ul> 
    </div>

CSS：

html, 
body { 
    margin: 0; 
    padding: 0; 
    font-family: Source Sans Pro, Helvetica, sans-serif; 
} 
.wrapper { 
    width: 100%; 
    height: auto; 
} 
ul.links { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    background-color: #EBEBEB; 
} 
ul.links a { 
    color: #737373; 
    text-decoration: none; 
} 
ul.links ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background: #fff; 
} 
ul.links li { 
    background: none; 
    color: #737373; 
    display: inline-block; 
    position: relative; 
    font-size: 19px; 
    padding-top: 22px; 
    padding-bottom: 22px; 
    padding-left: 35px; 
    padding-right: 35px; 
    transition: background 0.2s linear 0s, color 0.2s linear 0s; 
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s; 
} 
ul.links ul li { 
    position: relative; 
    font-size: 18px; 
    display: block; 
    float: left; 
    width: 100%; 
} 
ul.links li:hover { 
    background-color: #6ECFFF; 
} 
ul.links li:hover ul { 
    display: block; 
} 
ul.links li:hover .link { 
    color: #F0F0F0; 
} 
ul.links ul li:hover .link2 { 
    color: #F0F0F0; 
} 
#active { 
    background-color: #6ECFFF; 
} 
#active a { 
    color: #F0F0F0; 
} 
@media screen and (max-width: 760px) { 
    ul.links li 
    { 
     width: 100%; 
    } 

    ul.links ul { 
     position: absolute; 
     left: 0; 
    } 

    ul.links ul li { 
     background: #EBEBEB; 
    } 
}

的jsfiddle：https://jsfiddle.net/7tkn7zzs/

來源

2016-01-20 Henry Zhu

ul.links ul { 
     position: relative; 
     left: -35px; /* equal to padding left */ 
    }

來源

2016-01-20 08:20:32

這完美地工作。我所要做的只是添加（top：22px）來抵消鏈接的底部填充。 –

你應該ul.links ul {到position: relative;媒體查詢以正確顯示它。

ul.links ul { 
    position: relative; 
    left: 0; 
}

Working Fiddle

來源

2016-01-20 08:14:42 ketan

CSS下拉導航鏈接狹窄

回答

相關問題