Width of a H1 element

Question

I'm making the heading for a website and I ran into a problem. On the left side of the screen I have some text and on the right side is a language select menu, using a dropdown menu. But if I hover over the whole heading, the dropdown menu expands. I only want this to happen when I actually hover over the language select. Here some code:

 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>

Hope somebody has a solution!

Answer 1

so the html structure is not ideal. I run the code and I added to the .dropdown class the following: width:100px;float:right; If the the dropdown element takes the whole screen it will hover across the screen. You specify text-align:right but the div still occupies the whole screen. The code I provided it will work but is not a great solution, it will misbehave in different viewport sizes. To do this the right way you probably need to use flexbox. Highly recommend to see this guide .

Answer 2

Here's a start using a wrapper to give alignment to the dropdown. You have other layout issues to resolve, but I'm not sure of your intended outcome.

 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>