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

Question

<span id="priority-dot-open-menu">
                    <span id="priority-menu">
                        <span class="tooltip-top"></span>
                        <span id="priority-dot-blue"></span>
                        <span id="priority-dot-yellow"></span>
                        <span id="priority-dot-red"></span>
                    </span>
                </span>

/* The popup menu - hidden by default */
#priority-menu {      
    display: none;
    position: absolute;
    top: 150%;
    left: -50%;    
    border: 3px solid #f1f1f1;
    z-index: 9;    
    max-width: 300px;    
    padding: 10px;
    background-color: white;          
}

#priority-dot-open-menu { 
    position: relative;   
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

#priority-dot-open-menu:hover {
    opacity: 1;
}

My # priority-menu (столбец с 3 точками) является дочерним по отношению к точке выше (# priority-dot-open-меню).Мне нужно, чтобы я мог использовать абсолютное позиционированиеОднако он также наследует определенные свойства / значения, такие как непрозрачность и зависание, которые я не хочу.Каково было бы идеальное решение?https://jsfiddle.net/moq2bwLj/ (меню не открывается на js fiddle, оно просто для просмотра кода. Спасибо!

Answer 1

Дочерние элементы в CSS автоматически наследуют правила, применяемые к их родителям;Вы ничего не можете сделать, чтобы предотвратить это.Однако может сделать переопределить это поведение, создав правило, предназначенное для ребенка, изменив его на initial значение:

#priority-menu {
  cursor: initial;
  opacity: initial;
}