0
Я работаю над созданием верхнего меню навигации, которое также содержит выпадающий контент. На данный момент общий стиль, который я использую для меню, применяется к контенту в раскрывающемся меню, хотя для этого я создал отдельный стиль. Я считаю, что существует конфликт в том, как два класса, которые я назначил для раскрывающегося контента, взаимодействуют, но способы, которые я пробовал до сих пор, не были успешными.Выпадающее меню CSS с использованием неправильного стиля
/*Standard text formatting*/
body {
font-family: "Lucida Console";
}
/*Main Navigation for website*/
ul.MainNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.MainNavItem {
float: left;
}
li.MainNavItem.right {
float: right;
}
/*Causing problems with items in dropdown; color is applied everywhere*/
li.MainNavItem a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.MainNavItem a.active {
background-color: #4CAF50;
}
li.MainNavItem a:hover:not(.active),
.DropDown:hover {
background-color: #111;
}
/*Makes Main Navigation responsive*/
@media screen and (max-width: 800px) {
ul.MainNav li.MainNavItem.right,
ul.MainNav li.MainNavItem {
float: none;
}
}
/*Dropdown for Main Navigation*/
li.MainNavItem.DropDown {
display: inline-block;
}
/*Color style that should be used*/
.DropDown-Content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.DropDown-Content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.DropDown-Content a:hover {
background-color: #f1f1f1;
}
.DropDown:hover .DropDown-Content {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<title></title>
</head>
<body>
<ul class="MainNav">
<li class="MainNavItem"><a class="active" href="Index.html">Home</a>
</li>
<li class="MainNavItem DropDown"><a href="News.html">News</a>
<div class="DropDown-Content">
<a href="#CurrentProjects">Current Projects</a>
<a href="#Events">Events</a>
</div>
</li>
<li class="MainNavItem"><a href="Contact.html">Contact</a>
</li>
<li class="MainNavItem right"><a href="About.html">About</a>
</li>
</ul>
</body>
</html>Я также знаю, что это не отображается должным образом, когда размер экрана уменьшается для мобильных устройств, но я буду продолжать работать над этим отдельно. На данный момент я сосредоточен на том, чтобы стиль работал, прежде чем пытаться исправить отзывчивость меню.
в вашей таблице стилей у вас есть это обозначение: 'element.classname' (например,' li.MainNavItem {...} ') ... в вашем html у вас есть это обозначение:' '.... ... так что ваша нотация стилей не нужна ... вам не нужно' element.classname' ... вам просто нужно '.classname' ... –
dsdsdsdsd
также хорошая идея включить ссылку на ссылку [селекторная ссылка] (http://www.w3schools.com/cssref/css_selectors.asp) – dsdsdsdsd
также вам понадобятся запятые, в которых у вас есть несколько селекторов в вашей таблице стилей, например '.DropDown: hover .DropDown- Содержимое '----> измените его на' .DropDown: hover, .DropDown-Content '... может быть больше ... – dsdsdsdsd