Я пытаюсь заполнить цвет фона раскрывающегося списка красным, но моя кодировка не работает. Ниже приведены коды, которые я использую в настоящее время.

< Сильный > HTML

<div class="divMenu">
    <ul class="menu">
        <li><a href="index.html">HOME</a></li>
        <li>
            <a href="brands.html">BRANDS</a>
            <ul>
                <li><a>Brand 1</a></li>
                <li><a>Brand 2</a></li>
                <li><a>Brand 3</a></li>
            </ul>
        </li>
        <li>
            <a href="categories.html">CATEGORIES</a>
            <ul>
                <li><a>Category 1</a></li>
                <li><a>Category 2</a></li>
                <li><a>Category 3</a></li>
            </ul>
        </li>
        <li><a href="new_arrivals.html">NEW ARRIVALS</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>

< Сильный > CSS

.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; padding: 5px 25px;}
.divMenu ul.menu > li a {text-decoration: none; color: #000;}
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;}
.divMenu ul.menu > li a:hover {background-color: #f44336; color: #fff!important; cursor: pointer;}
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;}
.divMenu ul.menu > li:hover ul {display: block; padding: 0; margin: 0; z-index: 10; position: absolute;}

В результате назовите изображение следующим образом:

enter image description here

0
Emerald 27 Ноя 2016 в 16:10

2 ответа

Лучший ответ
.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; position: relative;}
.divMenu ul.menu > li a {text-decoration: none; color: #000;padding: 5px 25px;display: block;}
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;}
.divMenu ul.menu > li a:hover {background-color: #f44336; color: #fff!important; cursor: pointer;}
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;padding: 0;width: 100%;}
.divMenu ul.menu > li:hover ul {display: block; padding: 0; margin: 0; z-index: 10; position: absolute;}
<div class="divMenu">
<ul class="menu">
    <li><a href="index.html">HOME</a></li>
    <li>
        <a href="brands.html">BRANDS</a>
        <ul>
            <li><a>Brand 1</a></li>
            <li><a>Brand 2</a></li>
            <li><a>Brand 3</a></li>
        </ul>
    </li>
    <li>
        <a href="categories.html">CATEGORIES</a>
        <ul>
            <li><a>Category 1</a></li>
            <li><a>Category 2</a></li>
            <li><a>Category 3</a></li>
        </ul>
    </li>
    <li><a href="new_arrivals.html">NEW ARRIVALS</a></li>
    <li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
1
Felix A J 27 Ноя 2016 в 13:18
.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left;  }
.divMenu ul.menu > li a { padding:  15px; display: block; }
.divMenu ul.menu > li a {text-decoration: none; color: #000;}
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;}
.divMenu ul.menu > li:hover {background-color: #f44336; color: #fff!important; cursor: pointer;}
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;}
.divMenu ul.menu > li:hover ul {display: block;  z-index: 10; }

.divMenu ul.menu > li a:hover {color: #fff!important;}

.divMenu ul.menu > li {
    display:    block;
}

.divMenu ul.menu > li ul {
    padding:            0px;
    margin:             0px;
    margin-top:         0px;
}

.divMenu ul.menu > li li {
    display:    block;
    padding:    0px;
    width:      100%;
    margin:     0px;
}
0
Lukasz 27 Ноя 2016 в 13:25