Currently, I am delving into the world of HTML and CSS to hone my skills in front-end web development. While attempting to code a drop-down box within my navigation menu, I have encountered an issue where the drop-down opens at the left corner while the navigation link remains elsewhere on the page. Your assistance in resolving this matter would be greatly appreciated. The HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">A1</a></li>
<li><a href="">A2</a></li>
<li><a href="">A3</a></li>
</ul></li>
<li><a href="">Courses</a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">Python</a></li>
<li><a href="">Data Base Management System</a></li>
<li><a href="">Machine Learning</a></li>
<li><a href="">Blockchain</a></li>
</ul></li>
<li><a href="">Settings</a>
<ul>
<li><a href="">Your Profile</a></li>
<li><a href="">Your Cart</a></li>
<li><a href="">Mode</a></li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
The CSS code is as follows:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">A1</a></li>
<li><a href="">A2</a></li>
<li><a href="">A3</a></li>
</ul>
</li>
<li><a href="">Courses</a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">Python</a></li>
<li><a href="">Data Base Management System</a></li>
<li><a href="">Machine Learning</a></li>
<li><a href="">Blockchain</a></li>
</ul>
</li>
<li><a href="">Settings</a>
<ul>
<li><a href="">Your Profile</a></li>
<li><a href="">Your Cart</a></li>
<li><a href="">Mode</a></li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>Regarding the issue with the navigation menu layout, when no options are included, the Home, About, Courses, and Settings links align properly in the navigation bar. However, upon adding dropdown options, the individual links cascade downward instead of remaining in line.