1

私はナビゲーションメニュー用にこのCSSコードを持っています:

ul#css3menu_top,ul#css3menu_top ul {
    margin:0;
    list-style:none;
    padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
    background-color:#EEEEEE;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#css3menu_top .submenu {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    float:left;
    background-color:#EEEEEE;
    border-width:2px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#FFF;
    padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
    visibility:visible;
    opacity:1;
}
ul#css3menu_top li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu_top li:hover {
    z-index:1;
}
ul#css3menu_top ul .submenu {
    z-index:2;
    position:absolute;
    left:100%;
    top:0;
}
ul#css3menu_top {
    font-size:0;
    width:100%;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0 0%;
    margin:0 0%;
    *display:inline;
}
ul#css3menu_top .column {
    float:left;
}
* html ul#css3menu_top li a{
    display:inline-block;
}
ul#css3menu_top>li {
    margin:0;
    width:17%;
}
ul#css3menu_top li.toplast{
    width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
    outline-style:none;
}
ul#css3menu_top a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px Calibri;
    color:#EEEEEE;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:6px 15px 6px 3px;
    background-color:#666666;
    background-image:url("mainbk.png");
    background-repeat:repeat;
    background-position:0 0;
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#c0c0c0;
}
ul#css3menu_top ul li {
    float:none;
    margin:10px 0 0;
}
ul#css3menu_top ul a {
    text-align:left;
    padding:4px;
    background-color:#EEEEEE;
    background-image:none;
    border-width:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    font:14px Calibri;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
    background-color:#EEEEEE;
    color:#666666;
    background-position:0 100px;
    text-decoration:none;
}
ul#css3menu_top img {
    border:none;
    vertical-align:middle;
    margin-right:6px;
}
ul#css3menu_top span {
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu_top ul span {
    padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
    background-color:#EEEEEE;
    background-image:none;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
    padding-left: 7px;
    border-width:0;
    border-radius:4px 0 0 4px;
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
    padding-right: 7px;
    border-radius:0 4px 4px 0;
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
}

@media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
@media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
@media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}


/*opera hack*/
@media only screen and (min-width:900px){
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top{
            display:table;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top>li{
            width:auto;
            float:none;
            display:table-cell;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top li.toplast{
            width:auto;
            display:table-cell;
        }

}

メイン リンクの高さと幅を変更する方法が必要です。つまり、DEMO / DOWNLOAD / CONTACT リンクです。

ここにフィドルがあります：http://jsfiddle.net/EZh85/

私にできることはありますか？

編集:ホバー時に開くサブメニューを変更して上部に余白を設けて、メインメニューの上に表示されないようにするにはどうすればよいですか?

4

2 に答える 2

1

に追加height: 24px;しul#css3menu_top a、他の 2 つのタブではインライン スタイルを使用しているため、インライン スタイルを変更することで高さを変更できます。

JSフィドル

サイドノート：スタイルを書き直してください、それは混乱です

于 2013-03-30T17:58:23.817 に答える
0

ターゲットにしたいセレクターは次のとおりです。

/* For width */
ul#css3menu_top .topmenu
ul#css3menu_top .toplast
/* For height */
ul#css3menu_top a

残念ながら、インライン スタイルと、通常どおりにスタイルを設定しようとすると問題を引き起こす、次のような非常に特殊なスタイルがあります。

ul#css3menu_top>li:nth-child(n+3) {
    width: 50%;
}

理想的には、幅/高さが競合するすべてのインライン スタイルとルールを削除し、次のスタイルを含める必要があります。

jsフィドル

ul#css3menu_top .topmenu,
ul#css3menu_top .toplast {
    width:100px;
}
ul#css3menu_top a{
    height: 50px;
    line-height: 50px;
}

追加!importantしたのでオーバーライドされますが、これは悪い習慣であり、よりクリーンな CSS が必要な場合は、インライン スタイルやその他のルールを削除する必要があります。

ul#css3menu_top .topmenu,
ul#css3menu_top .toplast {
    width:100px!important;
}
ul#css3menu_top a{
    height: 50px!important;
    line-height: 50px!important;
}
于 2013-03-30T18:00:31.397 に答える