更改下拉菜单的外观

Question

我试图合并的外观：http://jsfiddle.net/kUHNJ/

我现在所处的位置：http://jsfiddle.net/5gTML/

我不知道自己做错了什么。我假设某些内联块应该是块并且反之亦然，但我真的不确定。

    Filler code

Answer 1

使用此

更改您的CSS

.main-header nav{
    background-color:#333333;
    height:40px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.main-header nav ul{
    list-style: none;
    margin: 0 auto;
    padding:0;
    height:40px;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:2.5em;
    width:100%;
    background-color:#333;
    display:inline-block;
}

.main-header nav ul a:link, .main-header nav ul a:active, .main-header nav ul a:visited{
    display:block;
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background-color:#333;
    width:100%;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
 }

.main-header nav ul a:hover{
    background-color:#bc9c98;
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.main-header nav ul ul a:link, .main-header nav ul ul a:active, .main-header nav ul ul a:visited{
   width:100%
   border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.main-header nav ul li{
    float:left;
    position:relative;
}

.main-header nav ul ul {
    position:absolute;
    top:2.5em;
    left:-2.5em;
     list-style-type:none;
     list-style-position:outside;
    line-height:2.5em;
    display:none;
    width:100%;
}
.main-header nav ul ul li{
    display:inline-block;
    width:100%;
}

.main-header nav ul li ul a{
   float:left;
   border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.main-header nav ul ul ul{
    top:auto;
}

.main-header nav ul li ul ul {
    position:absolute;
    top:auto;
    left:100%;
    margin:0px 0 0 -2em;
}

.main-header nav ul li:hover ul ul, .main-header nav ul li:hover ul ul ul, .main-header nav ul li:hover ul ul ul ul{
    display:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.main-header nav ul li:hover ul, .main-header nav ul li li:hover ul, .main-header nav ul li li li:hover ul, .main-header nav ul li li li li:hover ul{
    display:block;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

它有效..好运!!!!