#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;
}
это работает..удачи!!!!