Форум

iwarhill · #1 (**permalink**) 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 &nbsp;&nbsp;<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;
}

ksa · #2 (**permalink**) 24.08.2017, 11:25

Сообщение от iwarhill

Подскажите как сделать другой стиль для них

Например применить дочерний селектор к ссылкам главного меню
http://htmlbook.ru/samcss/dochernie-selektory

iwarhill · #3 (**permalink**) 24.08.2017, 12:13

ksa, Если не сложно.Можете готовый код скинуть. А то я вообще запутался. Пробовал без ссылок делать получается как надо. Но как вставляю ссылку сразу все не так(. А пробовал через <span>

<div class="dropdown-content">
        <span class="drop-link">Настройки</span>
        <span class="drop-link">Выход</span>
      </div>

ksa · #4 (**permalink**) 24.08.2017, 13:21

Сообщение от iwarhill

Можете готовый код скинуть.

Готовые решения платные. Работаю 1000р за час, только по предоплате.

Форум

Справочник

Discord чат

Курсы javascript