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%;
}

Ideally you should remove all inline styles and rules with width/height conflict with yours and include these styles:

jsFiddle

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

I just added !important so they are overridden but this is bad practice and you should remove the inline styles and other rules if you want cleaner 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 回答