Is there a way to use CSS to make a sub-menu start from the left side of the screen instead of starting it below the parent item?
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}<nav>
<ul>
<li>
<a href="/view_contacts.php">Contacts</a>
<ul>
<li><a href="add_contact.php">Add Contact</a></li>
<li><a href="view_contacts.php">View Contacts</a></li>
</ul>
</li>
<li>
<a href="/tickets.php">Tickets</a>
<ul>
<li><a href="new_ticket.php">New Ticket</a></li>
<li><a href="tickets.php">View Tickets</a></li>
</ul>
</li>
<li><a href="/invoices.php">Invoices</a></li>
<li><a href="/itemised_calls.php">Itemised Calls</a></li>
</ul>
</nav>Here is a jsfiddle link for demonstration, hope it helps! : http://jsfiddle.net/jhmkqrye/1/
Currently, the sub-menu for "Tickets" starts from below the ticket, but I want it to begin below "Contacts" from the start of the screen width to the end of the screen width.