Элемент списка не действует в соответствии с заданной командой - PullRequest
Новая
       70

Элемент списка не действует в соответствии с заданной командой

0 голосов
/ 08 октября 2019

пожалуйста, прости меня, если мой вопрос не был представлен в обычном порядке, это мой первый раз на этом форуме.

При этом у меня есть вопрос относительно css float. Все шло хорошо, вот в чем проблема. Я делал выпадающее меню и делал #ul li {float: left;}. Теперь, когда я добавил подменю, которое также является «ul li», поплавок не имел значения для списка подменю. Я искал ответы, но вопрос настолько специфичен, что его действительно сложно найти. Я думаю, что это как-то связано с тем, что я дал ширину и высоту элементов списка, но я не совсем уверен. Любая помощь будет принята.

Так что я получил результат, который искал, я просто ожидал, что li под информацией li также будут перемещаться влево, так как я вошел (#nav ul li {float left;}. Это относится к первому ряду li, но не к подменю, почему?

Код: Html 

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="./awesome/css/all.min.css">
    <title>navfinal</title>
</head>
<body>
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Info</a>

                    <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">What is our goal</a>
                            <ul>
                                <li><a href="#">Past</a></li>
                                <li><a href="#">Present</a></li>
                                <li><a href="#">Future</a></li>
                            </ul>

                        </li>
                        <li><a href="#">Something</a></li>
                    </ul>

                </li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Код CSS: 

body {
    background:#847E7E;
}

#wrapper {
    width:960px;
    height:900px;
    background:#8A8888;
    margin:0 auto;
    padding:0;
}


#nav {
    background:#363535;
    height:50px;
}

#nav ul {
    list-style:none;
    padding:0;
    margin:0;

}

#nav ul li {
    background:#363535;
    width:170px;
    height:50px;
    text-align:center;
    float:left;
}

#nav ul li a {
    font-size:22px;
    line-height:50px;
    display:block;
    text-decoration:none;
    color:#D31496;
}

#nav ul li a:hover {
    background:#C41BCA;
    color:black;
}

#nav ul li a:active {
    background:#514E4E;
    color:#9314C2;
}

#nav ul li > ul {
    display:none;
}

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


#nav ul li ul li ul {
    position:absolute;
    top:0;
    left:100%;
}

#nav ul > li {
    position:relative;
}

#nav i {
    float:right;
    font-size:35px;
    color:#218BE4;
    text-align:center;
    line-height:50px;
    padding:0 20px;
}

1 Ответ

0 голосов
/ 08 октября 2019

Как сказал 04FS, все ваши li элементы плавают. Если бы вы указали ширину в%, она должна была бы выровняться по линии (что выглядело бы хуже). Я не предлагаю больше правок, потому что он выглядит хорошо.

За ваше любезное внимание ..... Я не думаю, что вы заметили, что все ваши ul теги не имеют высоты. это из-за плавающей. чтобы исправить это, вы должны плавать ul и поставить пустой div со стилем clear: both; после закрытия ul.

...