如何擴大我的CSS3菜單，並減少其寬度

我正在從事Web項目，然後要求我應該添加一個頂級菜單到我的網站。所以我做了搜索，並從這個URL http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/找到了一個菜單。但是，當我添加了必需的css文件&字體，然後進入菜單中顯示出來的佈局如下的： - enter image description here 如何擴大我的CSS3菜單，並減少其寬度

因此，誰能在我該怎麼做了以下建議： -

要水平擴展菜單以覆蓋整個屏幕。對於頂部藍色區域。
使其在藍色的頂部區域下方。
縮小菜單寬度，並使其與麪包屑相同。

感謝

爲菜單的CSS是： -

.clearfix { 
    clear: both; 
} 

.wrap { 
    width: 940px; 
    margin: 4em auto; 
} 

nav { 
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc)); 
    background-image: linear-gradient(#fff, #ccc); 
    border-radius: 6px; 
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4); 
    padding: 0 10px; 
    position: relative; 
} 

.menu li { 
    float: left; 
    position: relative; 
} 

.menu li a { 
    color: #444; 
    display: block; 
    font-size: 14px; 
    line-height: 20px; 
    padding: 6px 12px; 
    margin: 8px 8px; 
    vertical-align: middle; 
    text-decoration: none; 
} 

.menu li a:hover { 
    background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff)); 
    background-image: linear-gradient(#ededed, #fff); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); 
    color: #222; 
} 

/* Dropdown styles */ 

.menu ul { 
    position: absolute; 
    left: -9999px; 
    list-style: none; 
    opacity: 0; 
    transition: opacity 1s ease; 
} 

.menu ul li { 
    float: none; 
} 

.menu ul a { 
    white-space: nowrap; 
} 

/* Displays the dropdown on hover and moves back into position */ 
.menu li:hover ul { 
    background: rgba(255,255,255,0.7); 
    border-radius: 0 0 6px 6px; 
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4); 
    left: 5px; 
    opacity: 1; 
} 

/* Persistant Hover State */ 
.menu li:hover a { 
    background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed)); 
    background-image: linear-gradient(#ccc, #ededed); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); 
    color: #222; 
} 

.menu li:hover ul a { 
    background: none; 
    border-radius: 0; 
    box-shadow: none; 
} 

.menu li:hover ul li a:hover { 
    background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff)); 
    background-image: linear-gradient(#ededed, #fff); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3); 
} 

@font-face { 
    font-family: 'IconicStroke'; 
    src: url("~/fonts/iconic/iconic_stroke.eot"); 
    src: local('IconicStroke'), 
     url("~/fonts/iconic/iconic_stroke.svg#iconic") format('svg'), 
     url("~/fonts/iconic/iconic_stroke.otf") format('opentype'); 
} 

.iconic { 
    color:inherit; 
    font-family: "IconicStroke"; 
    font-size: 38px; 
    line-height: 20px; 
    vertical-align: middle; 
} 

a.iconic:hover { 
    color:inherit; 
}

來源

2013-07-29 john G

更改.wrap類使用百分比寬度代替固定像素寬度（假設wrap是菜單的外部元素）需要確認菜單的html。直接在頂欄下方取出邊距或至少減少邊距。 –

在你的url引用中，'tilde'（** src：url（「〜/ fonts /...**））是什麼？ –

哪裏是小提琴？ –

我的建議！使用螢火蟲（Firefox的插件）。點擊菜單，它會打開所有的CSS。嘗試動態更改它們並立即修改更改。它甚至爲您提供需要進行更改的文件。

除此之外，約翰說的是對的。使用流體佈局（％）比剛性（px）好。所以，當你說你需要菜單的頁面大小，然後才能100％。

快樂編碼！

來源

2013-07-29 16:34:34

如何擴大我的CSS3菜單，並減少其寬度

回答

相關問題