Отредактировать стили выпадающего меню

@livehero · Регистрация: 06.03.2017

Студворк — интернет-сервис помощи студентам

Проблема с фоновым изображением подменю

@mrtoxas · 06.03.2017, 16:33

Где проблема? Все красиво, лесенкой

Приведите код, который даст возможность воспроизвести проблему.

@livehero · 06.03.2017, 16:52 **[ТС]**

Проблема в слове "Верстка" в подменю, её фон заканчивается на конце слова, а я хочу чтобы черный фон не заканчивался на конце слова.

Добавлено через 5 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
    <head>
    <style>
        #nav ul li {
        margin-left: 30px;
        display: inline-block;
        color:#93b1b1;
        background-color:rgb(0, 0, 0);
        padding: 10px 25px;
    }
    #nav ul li.col1:hover{
        background-color:rgb(199, 222, 75);
        color:black;
    }  
    #nav ul li.col2:hover{
        background-color:rgb(199, 222, 75);
        color:black;
    }  
    #nav ul li.col3:hover{
        background-color:rgb(199, 222, 75);
        color:black;
    }  
    #nav ul li.col4:hover {
        background-color:rgb(199, 222, 75);
        color:black;
    }  
    #nav ul li.col5:hover{
        background-color:rgb(199, 222, 75);
        color:black;}
            .col4{
        position: relative;
    }
    .displaynone{
        display: none;
    }
    .col4:hover .displaynone{
        position: absolute;
        display: block;
        margin-top: 10px;
        margin-left: -100px;
        width: 100;
         
    }
        
        </style></head>
<body>
     <div id="nav">
        <ul>
            <li class="col1">Главная</li>
            <li class="col2">О нас</li>
            <li class="col3">Услуги и цены</li>
            <li class="col4">Виды переводов
                <ul class="displaynone li2">
                   <li>Срочный перевод</li>
                   <li>Устные переводы</li>
                   <li><a href="#">Письменные переводы</a></li>
                   <li>Заверение перевода печатью бюро</li>
                   <li>Апостиль и легализация</li>
                   <li>Юридический перевод</li>
                   <li>Технический перевод</li>
                   <li>Медицинский перевод</li>
                   <li>Редактура перевода</li>
                   <li>Верстка</li>
                </ul>
            </li>
            <li class="col5">Контакты</li>
        </ul>
    </div> </body></html>

Добавлено через 3 минуты
Нашёл проблему, width 100px; не хватало в #nav ul li

@mrtoxas · 06.03.2017, 16:58

Попробуйте заменить стили блока:

CSS
1
2
3
4
5
6
7
8
9
.col4:hover .displaynone {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    background-color: black;
    top: 100%;
    left: 0;
}

В таком случае, просто закрашиваем родителя. И раз уж вы используете абсолютное позиционирование, то выравнивайте меню при помощи стилей left и top, а не при помощи margin.

@livehero · 06.03.2017, 17:08 **[ТС]**

Точно!%) я и забыл про это ... Спасибо тебе mrtoxas!=) Теперь всё встало на свои места

Новые блоги и статьи Все статьи Все блоги /
Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .	Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .	Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .
Раскрываем внутренние механики Android с помощью контекста и манифеста mobDevWorks 07.07.2025 Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .	API на базе FastAPI с Python за пару минут AI_Generated 07.07.2025 FastAPI - это относительно молодой фреймворк для создания веб-API, который за короткое время заработал бешеную популярность в Python-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .	Основы WebGL. Раскрашивание вершин с помощью VBO 8Observer8 05.07.2025 На русском https:/ / vkvideo. ru/ video-231374465_456239020 На английском https:/ / www. youtube. com/ watch?v=oskqtCrWns0 Исходники примера:	Мониторинг микросервисов с OpenTelemetry в Kubernetes Mr. Docker 04.07.2025 Проблема наблюдаемости (observability) в Kubernetes - это не просто вопрос сбора логов или метрик. Это целый комплекс вызовов, которые возникают из-за самой природы контейнеризации и оркестрации. К. . .	Проблемы с Kotlin и Wasm при создании игры GameUnited 03.07.2025 В современном мире разработки игр выбор технологии - это зачастую балансирование между удобством разработки, переносимостью и производительностью. Когда я решил создать свою первую веб-игру, мой. . .

@livehero 0 / 0 / 0 Регистрация: 06.03.2017 Сообщений: 3

	Отредактировать стили выпадающего меню 06.03.2017, 16:21. Показов 1300. Ответов 4 Метки нет (Все метки) Проблема с фоновым изображением подменю Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.03.2017, 16:33
	Где проблема? Все красиво, лесенкой Приведите код, который даст возможность воспроизвести проблему. 0

@livehero 0 / 0 / 0 Регистрация: 06.03.2017 Сообщений: 3
	06.03.2017, 17:08 [ТС]
	Точно!%) я и забыл про это ... Спасибо тебе mrtoxas!=) Теперь всё встало на свои места 0

Опции темы

Отредактировать стили выпадающего меню

Решение