Проблемы со списком внутри списков

У меня возникли проблемы с суб-навигационным меню, которое я создавал с помощью css и html.Проблемы со списком внутри списков

Проблема в том, что навигация третьего уровня отображается в строке, когда я хочу, чтобы она отображалась в виде списка. Каким будет лучший способ отображения этого списка в виде списка?

Все, что я делаю, похоже, не работает, думаю, это может быть проблема с css-конфликтом.

Я включил jsfiddle и код.

https://jsfiddle.net/e52u02bL/

HTML 

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
<head> 

    <link rel="stylesheet" type="text/css" href="css/component.css" /> 

</head> 
<body> 

<div class="nav"> 
<ul class="nav-primary test"> 
    <li><a href="#">Household</a> 
     <ul class="test"> 
      <li><a href="#">Living Room</a></li> 
      <li><a href="#">Bedroom</a></li> 
      <li><a href="#">Living Room</a> 
       <ul> 
        <div><h4>Heading</h4></div> 
        <li><a href="#">HTML</a></li> 
        <li><a href="#">HTML</a></li> 
        <li><a href="#">HTML</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Hardware</a> 
     <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">User Experience</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Wedding List</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Contact us</a></li> 
</ul> 
</div> 
</body> 
</html> 

CSS 

    .nav { 
    width: 100%; 
    background: #FFF; 
    padding: 0; 
    margin: 0; 
    position:relative; 
} 

.nav ul { 
    background: #FFF; 
    list-style:none; 
    padding:0 20px; 
    margin: 0; 
} 

ul.test li { 
    display: inline-block; 
} 

.nav ul li a { 
    color:#333333; 
    display:block; 
    padding:0px 40px; 
    text-decoration:none; 
    float: left; 
    height: 60px; 
    line-height: 60px; 
} 

.nav ul li:hover { 
    background: #3B95D3; 
} 


.nav ul li:hover > a{ 
    color:#FFFFFF; 
} 

.nav ul li:hover > ul { 
    display:block; 
} 

.nav ul ul { 
background: #FFF; 
padding:0; 
display:none; 
width: 100%; 
position: absolute; 
top: 60px; 
left: 0px; 
} 

.nav ul ul ul { 
background: #3B95D3; 
display:none; 
width: 100%; 
position: absolute; 
top: 60px; 
left: 0px; 
} 

.nav ul > li > ul > li > ul > li { 
float:left; 
background-color:red; 
padding-top:; 
width: 33.33333%; 
} 

.nav ul ul ul li { 
display: block; 
} 

div > h4 {color:#FFF; padding-left: 38px;} 

@media screen and (max-width: 480px) { 
.nav{ 
    width: 100%; 
    float: none; 
    padding: 0 2em; 
} 

.nav ul { 
    width: 100%; 
} 

.nav ul li { 
    width: 100%; 
} 

}

источник

2015-07-09 Robert

Я смущен относительно того, что вы имеете в виду, можете ли вы уточнить больше? – Robert

Будет ли это причиной ошибки, позволяющей не отображать список, отображаемый ниже, как список, а не встроенный? – Robert

Он встроен из-за двух вещей: '.nav ul li a {float: left;}' и 'ul.test li {display: inline-block;}'. – Neps

Попробуйте эту новую скрипку. Его грубое, что вам может понадобиться, но вы можете настроить ширину и вставить заголовок li. Не используйте div как прямой потомк ul.

new fiddle

.nav ul > li > ul > li > ul > li { 
    float:left; <-- this is one of your main problems. 
    background-color:red; 
    padding-top:; 
    width: 33.33333%; 
}

Надеется, что это помогает.

источник

2015-07-09 14:54:28 JDupont

Блестяще спасибо, что это решение, в котором я нуждался, что разобрал проблему! – Robert

Может быть, это связано с тем, как он был закодирован, но я планировал добавить в окно новые категории справа, которые открываются, когда я это делаю в данный момент, похоже, не показывает никаких причин для этого? – Robert

Проблемы со списком внутри списков

ответ

Смежные вопросы