如何减小下拉菜单触发标题元素的大小?

Question

我正在为一个网站制作标题，我遇到了一个问题。在屏幕的左侧，我有一些文本，在右侧是一个语言选择菜单，使用下拉菜单。但是如果我将鼠标悬停在整个标题上，下拉菜单就会展开。我只希望这个在悬停在语言选择上时发生。下面是一些代码:

header > h1 {
font-weight: bold;
font-size: 40px;
margin-left: 30px;
margin-top: 4%;
}
#hr1 {
background-color: #FFF;
height: 3px;
width: 50%;
margin-left: 30px;
margin-top: 10px;
}
.dropdown {
text-align: right;
margin-right: 30px;
margin-top: -57px;
background: pink;
}
.dropdown-div {
font-weight: bold;
font-size: 40px;
color: #FFF;
cursor: pointer;
}
.dropdown-items {
display: none;
}
.dropdown:hover .dropdown-items {
display: block;
}
.dropdown-items > button {
background-color: #0E3854;
border: none;
cursor: pointer;
}
.dropdown-items #dropdown-item1 {
display: none;
margin-bottom: 10px;
}
.dropdown-item {
display: block;
color: #FFF;
font-size: 20px;
margin-top: 10px;
margin-left: auto;
}
#dropdown-item2 {
margin-bottom: 10px;
}
#hr2 {
background: #FFF;
height: 3px;
width: 7%;
margin-left: auto;
margin-right: 30px;
margin-top: -3px;
}

<header>
<h1>The right side of the page</h1>
</header>
<hr id="hr1">
<div class="dropdown">
<h1 class="dropdown-div" id="dropdown-div-text">Taal</h1>
<div class="dropdown-items">
<button onclick="languageSelectDutch()" class="dropdown-item" id="dropdown- 
item1">Nederlands</button>
<button onclick="languageSelectEnglish()" class="dropdown-item" id="dropdown- 
item2">Engels</button>
</div>
</div>

Answer 1

下面是一个使用包装器对下拉列表进行对齐的开始。你还有其他布局问题要解决，但我不确定你想要的结果。

header>h1 {
font-weight: bold;
font-size: 40px;
margin-left: 30px;
margin-top: 4%;
}
.dropdown-wrapper {
text-align: right;
margin-right: 30px;
margin-top: -57px;
}
.dropdown {
display: inline-block; /* make this element shrink to contents */
}
.dropdown-div {
font-weight: bold;
font-size: 40px;
color: #FFF;
cursor: pointer;
background: pink;
}
.dropdown-items {
display: none;
}
.dropdown:hover .dropdown-items {
display: block;
}
.dropdown-items>button {
background-color: #0E3854;
border: none;
cursor: pointer;
}
.dropdown-items #dropdown-item1 {
margin-bottom: 10px;
}
.dropdown-item {
color: #FFF;
font-size: 20px;
margin-top: 10px;
margin-left: auto;
}
#dropdown-item2 {
margin-bottom: 10px;
}

<header>
<h1>The right side of the page</h1>
</header>
<hr id="hr1">
<div class="dropdown-wrapper">
<div class="dropdown">
<h1 class="dropdown-div" id="dropdown-div-text">Taal</h1>
<div class="dropdown-items">
<button onclick="languageSelectDutch()" class="dropdown-item" id="dropdown- 
item1">Nederlands</button>
<button onclick="languageSelectEnglish()" class="dropdown-item" id="dropdown- 
item2">Engels</button>
</div>
</div>
</div>

Answer 2

所以HTML结构不理想。我运行代码，我添加到。dropdown类如下:width:100px;float:right;如果下拉元素占据了整个屏幕，它将悬停在屏幕上。您指定了text-align:right，但是div仍然占据整个屏幕。我提供的代码可以工作，但不是一个很好的解决方案，它会在不同的视口大小下表现不佳。要正确地做到这一点，您可能需要使用flexx。强烈推荐阅读本指南。