| iwarhill |
24.08.2017 11:14 |
Стиль для ссылок в выпадающем меню.
Такая проблема.Ссылки в выпадающем меню при добавлении тега <a>
становятся таким же стилем как и главное меню. Подскажите как сделать другой стиль для них.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="top-menu">
<ul class="main-menu">
<li class="menu-item menu-item-left"><a href="">NEWS</a></li>
<li class="menu-item menu-item-left"><a href="">USERS</a></li>
<li class="menu-item menu-item-right">
<button class="button-drop">SETTINGS <i class="icon-excel" ></i></button>
<div class="dropdown-content">
<a href="">Settings</a>
<a href="">Exit</a>
</div>
</li>
</ul>
</nav>
<script src="js/index.js"></script>
</body>
</html>
CSS
Код:
* {
box-sizing: border-box;
}
body {
background-color: #ffffff;
font-family: Verdana;
font-size: 12px;
margin: 0;
}
.top-menu {
background-color: #6aacdd;
position: fixed;
width: 100%;
}
.main-menu {
list-style: none;
padding: 0;
margin: 0;
}
.main-menu li {
display: block;
}
.main-menu li a {
border-right: 1px solid #ffffff;
color: #ffffff;
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
transition: background-color 0.5s ease-in-out;
}
.main-menu li a:hover {
background-color: #52bfe9;
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
transition: background-color 0.4s ease-in-out;
}
.menu-item-left {
float: left;
}
.menu-item-right {
float: right;
position: relative;
}
.button-drop {
background-color: #6aacdd;
color: white;
padding: 15px 20px;
margin-right: 40px;
display: inline-block;
border: none;
cursor: pointer;
font-family: Verdana;
font-size: 12px;
outline: none;
transition: background-color 0.4s ease-in-out;
}
.button-drop:hover {
background-color: #52bfe9;
color: white;
border: none;
cursor: pointer;
font-family: Verdana;
font-size: 12px;
}
.dropdown-content {
display: none;
top: 50px;
position: absolute;
border: 1px solid #c5d0db;
border-radius: 3px;
white-space: nowrap;
z-index: 1;
width: 140px;
right: 38px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.drop-link {
background-color: #ffffff;
display: block;
color: #7f7f7f;
text-decoration: none;
padding: 5px;
}
.drop-link:hover {
background-color: #ececec;
text-decoration: none;
padding: 5px;
}
.menu-item-active .button-drop {
background-color: #52bfe9;
color: white;
}
.menu-item-active .dropdown-content {
display: block;
}
.icon-excel {
background-image: url("../friends.png");
padding-left : 30px;
padding-bottom : 10px;
background-repeat : no-repeat;
float: right;
}
|