Есть див с выпадающем меню и ссылкой на него

107andz · April 28, 2021

Есть див с выпадающем меню и ссылкой на него. Ширина меню намного больше ссылки. Проблема в том, что курсор срабатывает на строке ссылки по ширине меню.... Кто подскажет как избавиться от этого ?

klierik · May 7, 2021

Попробуйте поработать с этим примером

npofopr · April 28, 2021

Сделайте пример.

107andz · May 3, 2021

Вот так это выглядит структурно на странице (она очень не маленькая, т.ч. публикую только проблемный блок)

<!doctype html>
<html lang="ru">
<head>
<title>меню контекста</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="main_menu">
      <div class="dropdownbtn">
<a class="button"><p class="selected">меню</p></a>
        <div class="dropdownbtn-content">
<p class="title1"><a href="#">ссылка 1</a></p>
<p class="title1"><a href="#">ссылка 2</a></p>
<p class="title1"><a href="#">ссылка 3</a></p>
<p class="title1"><a href="#">ссылка 4</a></p>
<p class="title1"><a href="#">ссылка 5</a></p>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

--CSS--

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    position: relative;
}
.container {
    width: 100%;
    max-width: 1920px;
}
.main_menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.dropdownbtn {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.button,.selected {
    width: 10em;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-style: hidden;
}
.dropdownbtn-content {
    display: none;
    width: 100%;
    text-align: center;
}
.dropdownbtn-content a {
    text-decoration: none;
    color: black;
    display: block;
}
.dropdownbtn-content a:hover {
    margin-left: auto;
    margin-right: auto;
    width: 17em;
    background-color: blue;
}
.dropdownbtn:hover .dropdownbtn-content {
    display: inline-block;
    background-color: red;
}

klierik · May 4, 2021

13 часов назад, 107andz сказал:

Вот так это выглядит структурно на странице (она очень не маленькая, т.ч. публикую только проблемный блок)

Опубликуйте проблемный блок в песочнице, на пример — https://jsfiddle.net/

107andz · May 4, 2021

вот так это всё выглядит

https://jsfiddle.net/8wgzro6k/2/

Edited May 4, 2021 by 107andz

klierik · May 4, 2021

Для начала указано, что ссылка — это блочный элемент:

.dropdownbtn-content a {
  text-decoration: none;
  color: black;
  display: block; /* блочный */
}

которому задаётся ширина при наведении:

.dropdownbtn-content a:hover {
  margin-left: auto;
  margin-right: auto;
  width: 13em; /* задана ширина */
  background-color: blue;
}

Именно по этой причине ширина области действия ссылки больше чем её содержимое

107andz · May 6, 2021

Может я как-то неудачно написал о проблеме, но это вообще не решение - тут как раз всё ок.

Проблема в том, что курсор срабатывает на строке "меню" по ширине всего блока, а нужно чтобы только на кнопке "меню"

а это - ".dropdownbtn-content a:hover" - задается ширина "ссылки 1, 2,3...."

https://jsfiddle.net/r6hsf4cy/3/

Edited May 6, 2021 by 107andz

107andz · May 8, 2021

Попробовал. Благодарю. Работает почти без нареканий...

Sign In

Есть див с выпадающем меню и ссылкой на него

Question

107andz

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

107andz

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

107andz

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

107andz

Link to comment

Share on other sites

107andz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information