Hello!
I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed.
Here is the code snippet:
body {
margin: 0px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Adjust image positioning */
#img-nav {
padding-top: 0px !important;
}
/*Create a horizontal list*/
li {
display: inline-block;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 200px;
height: 70px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-top: 30px;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
...
</ul>
</nav>
</body>
</html>The challenge I'm facing now is ensuring that my menu spans full width on PC screens. If you have any suggestions or solutions, please share them. Thank you in advance!