I am currently exploring web development, with a focus on CSS, and I have set out to create a simple menu bar. However, I am encountering difficulty in properly formatting the anchor links of the submenus, as they are spanning two rows instead of one.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</body>
</html>
And here is the corresponding CSS code:
#menu{
list-style: none;
padding: 0px;
margin: 0px;
}
#menu li{
float:left;
padding: 0px 8px 0px 8px;
position: relative;
}
#menu li ul{
position: absolute;
list-style: none;
right: 0;
display: none;
}
#menu li li{
float: none;
}
#menu li:hover ul{
display: block;
}