As I work on creating dropdown menus for my website, I noticed that they appear very nice and organized on laptop screens with a resolution of 1280 x 800. However, when these menus are scaled to larger sizes, they tend to separate from each other even though their positioning is set to absolute.
Here is an example HTML code snippet for one of the dropdown navigation links:
<ul class="down-bar" style="list-style:hidden">
<div class="dropdown">
<input type="checkbox" value="drop" id="drop-1" class="dropper">
<li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Buttons <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu">
<a href="#" class="fix1"><label class="image1" style="width:30px;height:30px;position:absolute;top:1%;left:3%;cursor:pointer;"></label>Btn</a>
... (additional menu items)
</div>
</div>
I would like to note that the codes shared here have been altered for illustrative purposes.
The image(n) classes such as image1 contain images positioned next to the text content. On the other hand, the fix(n) classes are designed for longer text strings to ensure proper alignment. Text indentation has been used for this purpose.
You can view the complete result with original buttons on this JSFiddle link. Feel free to scale the page up or down to see how it behaves.
If you believe that the current implementation of the dropdown menus is incorrect and requires changes in the positioning types, what adjustments should be made? Any suggestions are welcome!