How can I center the sub-list items like the example image?
0
I'm trying figure out how to center the below nested lists. At the moment I'm using margin and padding to push the list items across.
The nested lists are displayed when hovering over the parent list item. The nested list items are displayed as inline-flex as inline-block doesn't in this example for some reason.
example image of what I'd
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>a JSFiddle to play with my code
html css html-lists
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
add a comment |
0
I'm trying figure out how to center the below nested lists. At the moment I'm using margin and padding to push the list items across.
The nested lists are displayed when hovering over the parent list item. The nested list items are displayed as inline-flex as inline-block doesn't in this example for some reason.
example image of what I'd
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>a JSFiddle to play with my code
html css html-lists
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
add a comment |
0
0
0
I'm trying figure out how to center the below nested lists. At the moment I'm using margin and padding to push the list items across.
The nested lists are displayed when hovering over the parent list item. The nested list items are displayed as inline-flex as inline-block doesn't in this example for some reason.
example image of what I'd
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>a JSFiddle to play with my code
html css html-lists
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
I'm trying figure out how to center the below nested lists. At the moment I'm using margin and padding to push the list items across.
The nested lists are displayed when hovering over the parent list item. The nested list items are displayed as inline-flex as inline-block doesn't in this example for some reason.
example image of what I'd
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>a JSFiddle to play with my code
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav> #nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 380px; /* an attempt to push the first list item across the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>html css html-lists
html css html-lists
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
edited Nov 13 '18 at 10:06
Pete
40.7k1875116
40.7k1875116
asked Nov 13 '18 at 9:33
sdsmsdsm
33
asked Nov 13 '18 at 9:33
sdsmsdsm
33
asked Nov 13 '18 at 9:33
sdsmsdsm
33
33
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
Just make the top level ul relative and keep the parent li non positioned, then you can absolutely position the child ul to take the full width and centre align the children:
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
add a comment |
0
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
add a comment |
0
I positioned the submenu at the left and use a flexbox to center the content. Also documented in the CSS code.
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
GerardGerard
11k41938
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277852%2fhow-can-i-center-the-sub-list-items-like-the-example-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Just make the top level ul relative and keep the parent li non positioned, then you can absolutely position the child ul to take the full width and centre align the children:
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
add a comment |
0
Just make the top level ul relative and keep the parent li non positioned, then you can absolutely position the child ul to take the full width and centre align the children:
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
add a comment |
0
0
0
Just make the top level ul relative and keep the parent li non positioned, then you can absolutely position the child ul to take the full width and centre align the children:
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
Just make the top level ul relative and keep the parent li non positioned, then you can absolutely position the child ul to take the full width and centre align the children:
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
position:relative; /* ADD THIS */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
margin:0;
padding:0;
display:none;
text-align:center;
left: 0;
right:0; /* stretch content full width of ul with left and right */
top:100%; /* push content below current ul */
}
.dropdown-content > li {
display:inline-block; /* so they centre */
margin:0 1em; /* space between each item */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
}
li:hover>.dropdown-content {
display: block;
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
answered Nov 13 '18 at 10:01
PetePete
40.7k1875116
40.7k1875116
add a comment |
add a comment |
0
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
add a comment |
0
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
add a comment |
0
0
0
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav> #nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav> #nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center; /* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px; /* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute; /* drops submenu below tabs */
display: none; /* hides submenu */
list-style-type: none; /* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
left: 0; /* an attempt to push the first list item towards the middle of the page */
}
li .sub-nav-link {
text-decoration: none; /* removes underline on links */
font-family: 'Segoe UI';
font-size: 15px;
color: #707070;
margin-right: 120px; /* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
.dropdown-content li{display: inline-block}
li:hover>.dropdown-content {
display: block; /* inline-block didnt work for me here(?) - but inline-flex did */<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
answered Nov 13 '18 at 9:49
Ismail RubadIsmail Rubad
7591621
7591621
add a comment |
add a comment |
0
I positioned the submenu at the left and use a flexbox to center the content. Also documented in the CSS code.
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
GerardGerard
11k41938
add a comment |
0
I positioned the submenu at the left and use a flexbox to center the content. Also documented in the CSS code.
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
GerardGerard
11k41938
add a comment |
0
0
0
I positioned the submenu at the left and use a flexbox to center the content. Also documented in the CSS code.
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
GerardGerard
11k41938
I positioned the submenu at the left and use a flexbox to center the content. Also documented in the CSS code.
#nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav> #nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav> #nav {
margin: 0;
}
ul {
background: #F8F8F8;
text-align: center;
/* centers 1st level list items but not 2nd level(?)*/
margin: 0 auto;
padding-inline-start: 0px;
/* override chrome user agent style of 40px */
}
/*1st level li styling */
.nav-tab {
border: 1px solid #F8F8F8;
border-radius: 10px 10px 0 0;
display: inline-block;
background: #F8F8F8;
padding: 0 40px;
font-family: 'Segoe UI';
font-size: 30px;
color: #707070;
}
.nav-tab:hover {
background-color: white;
border: 1px solid white;
border-radius: 10px 10px 0 0;
}
/*2nd level ul styling */
.dropdown-content {
position: absolute;
/* drops submenu below tabs */
display: none;
/* hides submenu */
list-style-type: none;
/* removes bullet points */
background: white;
font-family: 'Segoe UI';
font-size: 25px;
border: white;
min-width: 100%; /* li stretches % of length of parent element */
/* left: 380px; an attempt to push the first list item across the page */
left: 0; /* ADDED */
}
li .sub-nav-link {
text-decoration: none;
/* removes underline on links */
font-family: 'Segoe UI';
font-size: 25px;
color: #707070;
margin-right: 120px;
/* an attempt to push the 2nd, 3rd, .. list items further across the page */
}
li:hover>.dropdown-content {
/* display: inline-flex; inline-block didnt work for me here(?) - but inline-flex did */
display: flex; /* ADDED */
justify-content: center; /* ADDED */
}<nav class="nav" id="primary-nav">
<ul>
<li class="nav-tab">Products
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Range</a></li>
<li><a href="#" class="sub-nav-link">Catalogue</a></li>
<li><a href="#" class="sub-nav-link">Search</a></li>
</ul>
</li>
<li class="nav-tab">About Us
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Mission</a></li>
<li><a href="#" class="sub-nav-link">Background</a></li>
<li><a href="#" class="sub-nav-link">Design</a></li>
<li><a href="#" class="sub-nav-link">Production</a></li>
</ul>
</li>
<li class="nav-tab">Events
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Calendar</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Stockists
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">List</a></li>
<li><a href="#" class="sub-nav-link">link 2</a></li>
<li><a href="#" class="sub-nav-link">link 3</a></li>
</ul>
</li>
<li class="nav-tab">Contact
<ul class="dropdown-content">
<li><a href="#" class="sub-nav-link">Feedback</a></li>
<li><a href="#" class="sub-nav-link">FAQ</a></li>
<li><a href="#" class="sub-nav-link">Details</a></li>
</ul>
</li>
</ul>
</nav>answered Nov 13 '18 at 9:49
GerardGerard
11k41938
answered Nov 13 '18 at 9:49
GerardGerard
11k41938
answered Nov 13 '18 at 9:49
GerardGerard
11k41938
answered Nov 13 '18 at 9:49
GerardGerard
11k41938
11k41938
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277852%2fhow-can-i-center-the-sub-list-items-like-the-example-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
