Я относительно новичок в веб-разработке. У меня есть некоторые неудобства с эстетикой страницы. Я хотел бы знать, как я могу централизовать и сделать подменю ближе к родительскому меню. Я пробовал дополнение, а также многие другие коды, которые я читал в поисках того, что помогло другим. Я читал и пытался несколько раз безуспешно
/* 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>
Проверьте ссылку на изображение, которую я добавил выше сейчас
Пожалуйста, прочитайте stackoverflow.com/help/formatting и отформатируйте свой код так, чтобы мы могли его использовать, без необходимости вручную удалять форматирование кавычек из каждой строки или других подобных помех.
@maria проблему очень просто решить, но мне нужно проверить фактический рабочий код, чтобы я мог отладить и решить.
@CBroe теперь я понял, как это сделать.
@SahilDhir код очень длинный, и я не уверен, что смогу полностью поделиться им из-за конфиденциальности.
@Maria Мария, ваш код css имеет неправильную позицию: абсолютная причина всех этих проблем.
Ваше подменю ul
имеет отступ в 100 пикселей во всех четырех направлениях. Если вы хотите уменьшить расстояние между пунктами главного меню и подменю, вам следует начать с его уменьшения. И ознакомьтесь с тем, как работают инструменты разработчика, встроенные в современные браузеры, если вы еще этого не знаете - проверка элементов и выяснение того, какие поля, отступы и т. д. берутся откуда именно, довольно легко с их помощью.
Создаю 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;
}
Можете ли вы привести какой-нибудь рабочий пример?