如何從頁面擴展導航欄？

我有一個css導航欄，我想擴展我的網頁的兩側。現在它有一個非常小的寬度，似乎不管我玩多少比例沒有什麼變化。任何人都可以幫助我嗎？我對網頁設計頗爲陌生。我會後我的兩個CSS和HTML如何從頁面擴展導航欄？

CSS：

/* Links */ 

.menu li a { 
    display: block; 
    padding: 0 14px; 
    margin: 6px 0; 
    line-height: 28px; 
    text-decoration: none; 

    border-left: 1px solid #4075a6; 
    border-right: 1px solid #4075a6; 

    font-family: Archer,Helvetica, Arial, sans-serif; 
    font-weight: light; 
    font-size: 13px; 

    color: white; 
    text-shadow: 0px 0px 0px rgba(0,0,0,.6); 

    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
} 

.menu li:first-child a { border-left: none; } 
.menu li:last-child a{ border-right: none; } 

.menu li:hover > a { color: #b8ccdc; } 

/* Sub Menu */ 

.menu ul { 
    position: absolute; 
    top: 40px; 
    left: 0; 
    opacity: 0; 
    background: #195892; 
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 

    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
    width: 101px; 
} 

.menu li:hover > ul { opacity: 1; } 

.menu ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

.menu li:hover > ul li { 
    height: 36px; 
    overflow: visible; 
    padding: 0; 
} 

.menu ul li a { 
    width: 100px; 
    padding: 0px 0px 0px 0px; 
    margin: 0; 

    border: none; 
    border-bottom: 1px solid #353539; 
} 

.menu ul li:last-child a { 
    border: none; 
    color: #195892; 
}

HTML：

<ul class="menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Developements</a></li> 
    <li><a href="#">Condominiums</a> 
    <ul> 
     <li><a href="#" class="documents">Documents</a></li> 
     <li><a href="#" class="messages">Messages</a></li> 
     <li><a href="#" class="signout">Sign Out</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Video Tours</a></li> 
    <li><a href="#">Contact </a></li> 
</ul> 
<!-- end .menu -->

來源

2012-08-01 BiancaI

不確定你想要什麼。添加一些例子或嘗試在jsFiddle上重新創建問題，例如，同樣查看100行css有點困難。只放置你認爲必須工作的CSS，比如菜單容器的CSS。 – devundef 2012-08-01 17:12:17

我不太確定要發佈哪個CSS部分，因爲我不知道需要更改哪部分來擴展框的寬度。 – BiancaI 2012-08-01 17:15:03

我還是不明白。什麼盒子？當我把你的代碼放在jsFiddle上時，我幾乎看不到任何東西，但是我看到的是外部菜單框具有完整寬度：http://jsfiddle.net/jSdv3/ – devundef 2012-08-01 17:22:21

您需要在UL的寬度設置爲您所需的寬度。我認爲100％適合你，因爲它會從容器的邊緣到邊緣。

我建議在UL和LIs上放置背景顏色，以便您可以輕鬆地看到它們的開始和結束位置，然後一旦你將它們定位在你想要的位置，就移除它。

來源

2012-08-01 17:16:51 Sean

謝謝！我實際上已經掌握了它的工作原理，但是它不會從頁面的邊緣流失，是否有快速解決方案？ – BiancaI 2012-08-01 17:19:58

你有鏈接嗎？除非可以滾動，否則任何人都不知道它是否超出頁面範圍？你可以放大一個寬度而不是100％來擴展你想要的許多像素。 – Sean 2012-08-01 17:40:35

我需要將我的.menu更改爲100％寬度並添加position：absolute;正確：0;左：0;並且完美地工作。

來源

2012-08-01 17:33:58 BiancaI

如何從頁面擴展導航欄？

回答

相關問題