Изменение внешнего вида моего выпадающего меню

#html #css #drop-down-menu #menu #nav

#HTML #css #выпадающее меню #меню #навигация

Вопрос:

jsfiddle того внешнего вида, который я пытаюсь включить:http://jsfiddle.net/kUHNJ /

jsfiddle того, где я сейчас нахожусь:http://jsfiddle.net/5gTML /

Я больше не знаю, что я делаю не так. Я предполагаю, что некоторые из встроенных блоков должны быть блоками и наоборот, но я действительно не уверен.

     Filler code
  

Ответ №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;
}
  

это работает..удачи!!!!