Is there any way to make css style for input type="submit" button same like this style for nav bar buttons???
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content: '';
position: absolute;
display: block;
height: 0.3em;
background-color: #000000;
bottom: -0.9em;
transition: all ease-in-out 350ms;
left: 0;
width: 0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover {
color: rgb(0, 0, 0);
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
Related
I have this problem when I try to add a logo to my navbar. When I put the logo before the other navbar items the logo is way too big and when I try to resize it still looks out of place. I would like to have to logo in line with the other items or have the other navbar items to be centered in line with the logo. I think using flexbox would be a lot simpler and make this process easier, but I would like to avoid using flexbox here for this navbar.
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
A very quick patch without flexbox is to add the declaration: vertical-align: middle; to your nav ul li { } rule
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
Your guess was correct. I added display: flex to the ul container. The list items are shown inline and centered both vertically and horizontally.
But they are kept on one single line word-wrapping their content.. did you prefer the items to overflow on next line?
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
/*as easy as using display flex on container*/
display: flex;
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
Why animation on nav bar, that red line, if you set 100% width on nav li a::after works backward and not from left to right side how it should be or how I want to?
HTML
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
CSS
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content:flex-start;
align-items: center;
padding: 1em 0;
}
nav li a {
text-decoration: none;
color: #000000;
padding-left: 3em;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 250ms;
}
nav li a:hover::after {
width: 60%;
}
nav li a:hover{
color: red;
}
You want to change multiple things because some css property is not appropriate for your html class...
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 350ms;
left: 0;
width:0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover{
color: red;
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
Is this an accpetable solution for you?
`a{
display: flex;
align-items: center;
justify-content: center;
}`
add this to your css code
heres my codepen:
https://codepen.io/oskedram/pen/abWREpg
Have to convert this horizontal navigation bar with button in place of anchor tags and let it behave and look the same way
https://codepen.io/shaswat/pen/GOrpKX
ever anchor tag should be removed and should be replaced with a button like <input type=button >
so it can look like a navigation bar
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
Its just a matter of css if i understood what you wanted to do right:
https://codepen.io/anon/pen/JOENRY
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu button {
background-color: transparent;
border: 0px;
}
#cssmenu > ul > li > button {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > button {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li.active > button,
#cssmenu > ul > li > button.active {
background: black;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li button {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu > ul ul li button:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li button:active {
background: green;
}
#cssmenu li button:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40% ;
right:5px;
}
#cssmenu li:hover > button:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top:-6px
}
<div id='cssmenu'>
<ul>
<li ><button href='#'>Home</button>
<ul>
<li><button href='#'>Product 1</button></li>
<li><button href='#'>Product 2</button></li>
<li><button href='#'>Product 3</button></li>
</ul>
</li>
<li><button class='active' href='#'>Products</button>
</li>
<li><button href='#'>About</button>
</li>
<li><button href='#'>Contact</button></li>
</ul>
</div>
try this code
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
// background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
//background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 10px;
margin: 0;
padding: 0;
z-index: -1;
//box-shadow: 5px 5px 5px #808080;
display: block;
}
#cssmenu>ul li {
display: inline;
}
#cssmenu>ul li input {
text-decoration: none;
padding: 7px;
background-color: red;
border: none;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 32px;
left: 0;
display: block !important;
}
#cssmenu>ul ul li input {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
}
<div id='cssmenu'>
<ul>
<li><input type="button" value="Home">
<ul>
<li><input type="button" value="Product 1"></li>
<li><input type="button" value="Product 2"></li>
<li><input type="button" value="Product 3"></li>
</ul>
</li>
<li><input type="button" value="Products">
</li>
<li><input type="button" value="About">
</li>
<li><input type="button" value="Contact"></li>
</ul>
</div>
I just replaced a with button in html and css and added a button css tag (dont use it like this use a class instead this is for presentation purpose only). I gave bg color of blue to buttons and removed thier white border . Instead of href use onclick event and append them addEventlistner to tinker with them. Thought i wont recommend using buttons here but here you go.
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: black;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover>a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -6px
}
<div id='cssmenu'>
<ul>
<li><button>Home</button>
<ul>
<li><button>Product 1</button></li>
<li><button>Product 2</button></li>
<li><button>Product 3</button></li>
</ul>
</li>
<li><button class='active'>Products</button>
</li>
<li><button>About</button>
</li>
<li><button>Contact</button></li>
</ul>
</div>
It's the HTML of my code. I created navigation menubar with submenu in dropdown option but my submenu is not dropping down under the parent menu "dropdown" is parent menu.
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div></li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul></div>
Here is the CSS:
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Dropdown</a>
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
I've updated your CSS code and HTML as well. Your structure is over complicated and css with id does not reuseable for other dropdown menu.
.nav {
display: inline-block;
text-align: left;
}
.nav,
.dropdown {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav > li {
float: left;
position: relative;
}
.nav li > a {
display: block;
position: relative;
padding: 10px 25px;
color: #000;
font: bold 14px sans-serif;
text-decoration: none;
}
.nav .dropdown {
display: none;
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);
min-width: 160px;
}
.nav .dropdown .dropdown {
top: 0;
left: 100%;
}
.nav .dropdown > li {
position: relative;
}
.nav li:hover > .dropdown {
display: block;
}
.nav .dropdown a:hover {
background-color: #f1f1f1;
}
.nav a::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background: #000;
transition-property: left, right;
transition: width 1s ease;
}
.nav a:hover::after {
width: 100%;
left: 0;
background: #000;
}
<div style="text-align: center">
<ul class="nav">
<li>Home</li>
<li>
Dropdown
<ul class="dropdown">
<li>Link 1</li>
<li>
Link 2
<ul class="dropdown">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
On my home page the dropdown ul looks exactly how I want it to:
But on all my other pages the ul looks much bigger like this:
Here is the HTML for the home page:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li>News</li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the HTML for the other page:
<header id="header">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS for both:
#header {
background-color: #fff;
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
color: #000;
cursor: default;
font-size: 1.25em;
height: 4.5em;
left: 0;
line-height: 4.4em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
z-index: 10001;
}
#header a {
color: #000;
}
#header h1 {
color: #000;
font-weight: 400;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 0;
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 0;
padding-right: 50px;
display: block;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
#header nav ul li .button {
border-color: rgba(144, 144, 144, 0.25);
box-shadow: none;
height: 3em;
line-height: 2.9em;
margin-bottom: 0;
padding: 0 1.5em;
position: relative;
top: -0.075em;
vertical-align: middle;
}
#header .container {
position: relative;
}
#header .container h1 {
left: 0;
}
#header .container nav {
right: 0;
}
#header.alt {
background-color: transparent;
border: 0;
box-shadow: none;
height: 3.25em;
line-height: 3.25em;
position: absolute;
}
#header.alt h1 {
color: #ffffff;
left: 2.5em;
top: 2em;
}
#header.alt h1 a {
color: #FFF;
}
#header.alt nav {
right: 2em;
top: 2em;
}
#header.alt nav a {
color: #ddd;
}
#header.alt nav a:active, #header.alt nav a:hover {
color: #FFF;
}
#header.alt .button {
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff !important;
}
#media screen and (max-width: 980px) {
#header {
display: none;
}
}
I would like the other page's <ul> elements to be the same size as the home page but I can't seem to find any extra margins or padding on them.
It is because of the alt class. The ul li ul li gets a line-height from the alt class.
So force the same line-height upon the #header nav ul li ul li by adding the same line-height. Which is line-height: 3.25em;.
The issue is down to your line heights - they are set on #header and #header.alt to different values:
#header.alt:
line-height: 3.25em;
#header:
line-height:4.4em;
This is causing the difference you are seeing in your nav links.