Question

我有一个导航菜单的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/

任何想法我能做什么？

编辑：如何更改在悬停时打开的子菜单在顶部有一个边距，以便它不显示在主菜单上？

Answer 1

将height: 24px;添加到ul#css3menu_top a，对于其他2个标签，您使用的是内联样式，以便您可以通过修改内联样式来更改高度

JS Fiddle

旁注：重写样式，这是一团糟

Answer 2

您要定位的选择器如下：

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

理想情况下，您应删除所有与您的宽度/高度冲突的内联样式和规则，并包含以下样式：

jsFiddle

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

CSS / HTML下拉导航 - 更改高度和宽度

2 个答案: