Как я могу централизовать выпадающее меню и уменьшить расстояние между его подменю?

Я относительно новичок в веб-разработке. У меня есть некоторые неудобства с эстетикой страницы. Я хотел бы знать, как я могу централизовать и сделать подменю ближе к родительскому меню. Я пробовал дополнение, а также многие другие коды, которые я читал в поисках того, что помогло другим. Я читал и пытался несколько раз безуспешно

/* Dropdown menu */
nav ul {
    padding: 0px;
    margin: 100px;
    margin-right: 0px;
    margin-left: 0;
    list-style: none;
    position: relative;
    font-size: 25px;
    background-color: white;
    cursor: pointer;
}

        nav ul li {
            display: inline-block;
            padding: 0 20px 0 20px;
        }

nav a {
    display: block;
    padding: 0 10px;
    line-height: 60px;
    font-size: 20px;
    text-decoration: none;
    background-color: #FFFFFF;
    color: black;

}
/* Hide Dropdown by Default*/
nav ul ul {
    display: none;
    position: absolute;
}
/* hover */
nav a:hover {
    background-color: #FFFFFF;
    color: #A4E5E0;
    border: 1px solid gray;
    display: block;
    position: absolute;
    left: 0;
}
/* Display Dropdown on Hover */
nav ul li:hover > ul {
    display: inherit;
}
/* First Tier Dropdown */
nav ul ul li {
    width: 350px;
    float: none;
    display: list-item;
    position: absolute;
    border: 1px solid gray;
}
<body>
    <div id = "container" style = "position:absolute">
        <header>
            <nav>
                <ul>
                    <li>
                        Head Count
                        <ul>
                            <li class = "nav-item">@Html.ActionLink("Agregar nuevo Head Count", "CreateHeadCount", "Home", new { area = "" }, null) </li>
                            <li class = "nav-item">@Html.ActionLink("Editar Head Count", "EditHeadCount", "Home", new { area = "" }, null) </li>
                            <li class = "nav-item">@Html.ActionLink("Actualizar Grupo", "UpdateAllHC", "Home", new { area = "" }, null) </li>
                        </ul>
                    </li>
                    <li>
                        SPH
                        <ul>
                            <li class = "nav-item">@Html.ActionLink("SPH Acumulada", "GetSPH", "Home", new { area = "" }, null)  </li>
                            <li class = "nav-item">@Html.ActionLink("Missing SPH", "MissingSPH", "Home", new { area = "" }, null)  </li>
                        </ul>
                    </li>
                    <li>
                        Work Orders
                        <ul>
                            <li class = "nav-item">@Html.ActionLink("Returned work orders", "ReturnedWO", "Home", new { area = "" }, null) </li>
                            <li class = "nav-item">@Html.ActionLink("Work orders without movement", "GetWOWithoutMov", "Home", new { area = "" }, null) </li>

                        </ul>
                    </li>
                    <li>
                        Weekly Efficiency
                        <ul>
                            <li class = "nav-item">@Html.ActionLink("Add Weekly Efficiency", "DowngradeTierLevel", "Home", new { area = "" }, null)</li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</body>

Общий вид

Можете ли вы привести какой-нибудь рабочий пример?

Sahil Dhir 09.02.2023 12:39

Проверьте ссылку на изображение, которую я добавил выше сейчас

Naksu 09.02.2023 12:49

Пожалуйста, прочитайте stackoverflow.com/help/formatting и отформатируйте свой код так, чтобы мы могли его использовать, без необходимости вручную удалять форматирование кавычек из каждой строки или других подобных помех.

CBroe 09.02.2023 12:49

@maria проблему очень просто решить, но мне нужно проверить фактический рабочий код, чтобы я мог отладить и решить.

Sahil Dhir 09.02.2023 12:53

@CBroe теперь я понял, как это сделать.

Naksu 09.02.2023 13:09

@SahilDhir код очень длинный, и я не уверен, что смогу полностью поделиться им из-за конфиденциальности.

Naksu 09.02.2023 13:10

@Maria Мария, ваш код css имеет неправильную позицию: абсолютная причина всех этих проблем.

Sahil Dhir 09.02.2023 13:11

Ваше подменю ul имеет отступ в 100 пикселей во всех четырех направлениях. Если вы хотите уменьшить расстояние между пунктами главного меню и подменю, вам следует начать с его уменьшения. И ознакомьтесь с тем, как работают инструменты разработчика, встроенные в современные браузеры, если вы еще этого не знаете - проверка элементов и выяснение того, какие поля, отступы и т. д. берутся откуда именно, довольно легко с их помощью.

CBroe 09.02.2023 13:12
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
8
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Создаю codeandbox с решением на основе вашего кода Ваша основная проблема заключается в том, что вы везде используете абсолютную позицию и забываете установить позицию, используя свойства top/left. Также маржа на плохом уровне не поможет вам.

  /* Dropdown menu */
  nav ul {
    padding: 0px;
    /*margin: 100px; /*why ?*/
    /*margin-right: 0px;
    margin-left: 0;*/
    list-style: none;
    position: relative;
    font-size: 25px;
    background-color: white;
    cursor: pointer;
  }

  nav ul li {
    display: inline-block;
    padding: 0 20px 0 20px;
    position: relative;
  }

  nav a {
    display: block;
    padding: 0 10px;
    line-height: 60px;
    font-size: 20px;
    text-decoration: none;
    background-color: #ffffff;
    color: black;
  }
  /* Hide Dropdown by Default*/
  nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }
  /* hover */
  nav a:hover {
    background-color: #ffffff;
    color: #a4e5e0;
    border: 1px solid gray;
    display: block;
    /*position: absolute;*/ /* not needed */
    left: 0;
  }
  /* Display Dropdown on Hover */
  nav ul li:hover > ul {
    display: inherit;
  }
  /* First Tier Dropdown */
  nav ul ul li {
    width: 350px;
    float: none; /* remove it */
    /*display: list-item;*/
    /*position: absolute; /* ul must be absolute, not li*/
    border: 1px solid gray;
  }

Другие вопросы по теме