I am hoping to expand this to full width! While the code isn't too complex, I'm still fairly new to HTML and CSS.
/*Adjusting the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/*CSS for hiding the sub menus.*/
li ul {
display:none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #2c3e50;
}
/*Showing the dropdown menu on hover. */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
.main.navigation li ul li {
border-top: 0;
}
/*Positioning second level dropdown menus to the right of the first level dropdown menu. */
ul ul ul {
left: 100%;
top: 0;
}<!DOCTYPE html>
<html lang="hu-hu">
<head>
<meta charset="UTF-8>
<title>cigand.menu.nested.list</title>
<link rel="stylesheet"
type="text/css"
href="cigand.hu.menu.1.css" />
</head>
<body>
<div id="main-navigation">
<ul>
<li><a>Városunk</a>
<ul>
...
... (The rest of the HTML content)
...
</ul>
</div>
</body>
</html>
/*So I would like to make it full width!*/