I'm running into this little issue where when i put the mouse on the very top of a button i can click on it but when it goes just a little down the dropdown menu appears and i can't click anymore on the button :
Here's a codepen for the code : https://codepen.io/amrouhab/pen/jObXxOy
And here's my code :
<body>
<div id="header_bar">
<div id="header_bar_text" class="gpd-text">Syndicat Constructif, Partenaire du Dialogue Social
</div>
</div>
<nav>
<div href="#default" id="logo"><img src="logo_header.png"></div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Accueil</li>
<li>
<label for="drop-1" class="toggle">Connaitre la CFTC +</label>
Connaitre la CFTC
<input type="checkbox" id="drop-1" />
<ul>
<li>Histoire</li>
<li>Valeurs</li>
<li>Identité</li>
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Syndicat CFTC-FPT 34 +</label>
Syndicat CFTC-FPT 34
<input type="checkbox" id="drop-2" />
<ul>
<li>Organisation</li>
<li>Accueil</li>
<li>Rôle et définition</li>
<!-- <li>
SECOND TIER DROP
<label for="drop-3" class="toggle">Tutorials +</label>
Tutorials
<input type="checkbox" id="drop-3" />
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Other</li>
</ul>
</li> -->
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Vie Professionnelle +</label>
Vie Professionnelle
<input type="checkbox" id="drop-1" />
<ul>
<li>Formation</li>
<li>Statut</li>
<li>Carrière</li>
<li>Temps de Travail</li>
<li>Congés</li>
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Vie Pratique +</label>
Vie Pratique
<input type="checkbox" id="drop-1" />
<ul>
<li>Action Logement</li>
<li>Pensions Alimentaires impayées</li>
<li>Prime d'activité</li>
<li>Apprentissage</li>
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Activités +</label>
Activités
<input type="checkbox" id="drop-1" />
<ul>
<li>Actualités</li>
<li>Presse</li>
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Adhésion +</label>
Adhésion
<input type="checkbox" id="drop-1" />
<ul>
<li>Les + adhérents</li>
<li>Espace adhérents</li>
<li>Nous rejoindre</li>
</ul>
</li>
<li>
<label for="drop-1" class="toggle">Coordonnées +</label>
Coordonnées
<input type="checkbox" id="drop-1" />
<ul>
<li>Syndicat CFTC-FPT 34</li>
<li>UD34</li>
<li>Fédération CFTC FPT</li>
</ul>
</li>
</ul>
</nav>
</body>
And my CSS :
/* CSS Document */
#font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
font-family: "lato";
src: url("fonts\Lato-Regular.ttf");
font-family: "playfairdisplay";
src: url("fonts\PlayfairDisplaySC-Regular.otf");
}
body {
background: #e9dfdf;
/* font-size: 30px; */
/* line-height: 32px; */
color: #ffffff;
margin: 0;
/* padding: 0; */
word-wrap: break-word !important;
font-family: oswald;
}
/* h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
} */
a {
color: #FFF;
}
/* h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'Bree Serif', 'serif';
} */
#container {
margin: 0 auto;
max-width: 890px;
}
/* p {
text-align: center;
} */
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0px;
padding: 15px 10px 10px 10px;
background-color: #01B2C0;
position: relative;
}
#logo {
display: block;
padding: 0px 30px 0px 15px;
float: left;
/* font-size: 20px; */
/* line-height: 60px; */
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: none;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
/* bottom: 0; */
left: 137px;
padding: 44px 37px 35px 120px;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #01B2C0;
position: relative;
padding: 0px 5px 0px 5px;
}
/* Styling the links */
nav a {
display: block;
padding: 10px 15px;
color: #000000;
font-size: 24px;
text-decoration: none;
position: relative;
}
nav ul li ul li:hover {
border: solid 1px;
background: #07858f;
}
/* Background color change on Hover */
nav a:hover {
background-color: #07858f;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 15px;
left: -100px;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}
#header_bar{
padding:5px 0px 0px 0px;
min-height:50px;
background-color:#01B2C0;
margin: auto;
color: #000000;
font-size: 25px;
}
#header_bar_text{
background-color:#01B2C0;
margin: 0px 0px 0px 0px;
text-align: center;
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle+a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked+ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<nav>
That's it thanks for the help !
The easiest way is to add for example z-index: 2 for the nav a selector. This is because nav ul has padding on top and overlaps the element.
Related
I have a rather large navigation bar - when the browser is resized it pushes some list items below, which I understand. However, when you hover over the list items on the top row, the dropdowns fall behind the list items that were pushed onto a second line. This is what I mean:
How can I get the "example" list items to sit above the list items on the second line (Supplier Directory and Travel Trade in this case). It's probably something really simple that I'm missing somewhere. Thanks!
I've attached a codepen to demonstrate the problem too - resize the browser so that the list items fall to the line below: https://codepen.io/Macast/pen/jZrObb
HTML:
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Attractions & Entertainments +</label>
Attractions & Entertainments
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Conference, Meetings & Events +</label>
Conference, Meetings & Events
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Accommodation +</label>
Accomodation
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>Supplier Directory</li>
<li>Travel Trade</li>
<li>Contact Us</li>
<li>Additional Support</li>
</ul>
</nav>
CSS:
html,
body {
height: 100%;
width: 100%;
font-family: "Helvetica Neue Bold", "Arial Bold", sans-serif;
margin: 0;
}
/* Navigation Bar */
.toggle,
[id^="drop"] {
display: none;
}
/* Giving a background-color to the nav container */
nav {
margin: 0;
padding: 0;
background-color: #3c3c3b;
}
/* Since we'll have the "ul li" "float: left", we need to add a clear after the container */
nav: after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul", and adding "position: relative" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
z-index: 50; /* Link items will stay above all other content, e.g. Maps */
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 12pt;
text-decoration: none;
text-align: center;
}
/* Background colour change on hover */
nav a:hover {
background-color: #000000;
}
nav ul li ul li:hover {
background: #000000;
}
/* Hide dropdowns by default and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* Had to be the same number as the "line-height" of "nav a" */
/*top: 60px;*/
left: 0;
right: 0;
}
/* Display dropdowns on hover */
nav ul li:hover > ul,
nav ul li:focus > ul {
display: inherit;
}
/* First Tier Dropdowns */
nav ul ul li {
float: none;
display: list-item;
position: relative;
text-align: center;
z-index: 100;
}
/* Second, Third and more Tier Dropdowns */
/* We move the 2nd and 3rd etc tier dropdowns to the left by the amount of the width of the first tier */
nav ul ul ul li {
position: relative;
/*top: -60px;*/
/* Has to be the same number as the "width" of "nav ul ul li" */
left: 200px;
}
/* Change ' +' in order to change the dropdown symbol */
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}
In the css, removed the z-index:50; line, and it worked.
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
z-index: 50; /* <---------------THIS LINE HERE, REMOVED */
}
Here is the snippet:
html,
body {
height: 100%;
width: 100%;
font-family: "Helvetica Neue Bold", "Arial Bold", sans-serif;
margin: 0;
}
/* Navigation Bar */
.toggle,
[id^="drop"] {
display: none;
}
/* Giving a background-color to the nav container */
nav {
margin: 0;
padding: 0;
background-color: #3c3c3b;
}
/* Since we'll have the "ul li" "float: left", we need to add a clear after the container */
nav: after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul", and adding "position: relative" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 12pt;
text-decoration: none;
text-align: center;
}
/* Background colour change on hover */
nav a:hover {
background-color: #000000;
}
nav ul li ul li:hover {
background: #000000;
}
/* Hide dropdowns by default and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* Had to be the same number as the "line-height" of "nav a" */
/*top: 60px;*/
left: 0;
right: 0;
}
/* Display dropdowns on hover */
nav ul li:hover > ul,
nav ul li:focus > ul {
display: inherit;
}
/* First Tier Dropdowns */
nav ul ul li {
float: none;
display: list-item;
position: relative;
text-align: center;
z-index: 100;
}
/* Second, Third and more Tier Dropdowns */
/* We move the 2nd and 3rd etc tier dropdowns to the left by the amount of the width of the first tier */
nav ul ul ul li {
position: relative;
/*top: -60px;*/
/* Has to be the same number as the "width" of "nav ul ul li" */
left: 200px;
}
/* Change ' +' in order to change the dropdown symbol */
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Attractions & Entertainments +</label>
Attractions & Entertainments
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Conference, Meetings & Events +</label>
Conference, Meetings & Events
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Accommodation +</label>
Accomodation
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>Supplier Directory</li>
<li>Travel Trade</li>
<li>Contact Us</li>
<li>Additional Support</li>
</ul>
</nav>
I have a navigation bar that is fluid on both desktop and mobile devices. However, the drop-down items widths don't resize based on the parent's width. I would like to hover over a drop-down item and it has the same width as the list item I hovered over. At the moment it has a fixed width but I can't seem to get it working by trying other options. I also cannot get the entire navigation bar to center, as at the moment it is stuck to the left. Thanks for the help!
Here's a codepen of the code: https://codepen.io/Macast/pen/rYQPNe
HTML:
<nav>
<div id="logo">
<img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Short +</label>
Short
<input type="checkbox" id="drop-1" />
<ul>
<li>History</li>
<li>Our Services</li>
<li>Our Aim</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Dropdown Even Longer +</label>
Dropdown Even Longer
<input type="checkbox" id="drop-2" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">More Options +</label>
More Options
<input type="checkbox" id="drop-3" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
</ul>
</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</nav>
CSS:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
text-align: center;
/*padding: 0 30px;*/
/*float: left;*/
/*font-size: 20px;*/
/*line-height: 60px; */
}
#logo img {
width: 30%;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
/*float: right;*/
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
text-align: center;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
text-align: center;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
text-align: center;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' +';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
#logo img {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
text-align: center;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
To adjust the dropdown menu size to the same size as the containing list-item, declare a left and right property value of 0 on the dropdown element in question (nav ul ul), then remove the explicitly declared width on the nested list items of the dropdown menu (nav ul ul li).
Example:
nav ul ul {
display: none;
position: absolute;
top: 60px;
/* additional property values declared */
left: 0;
right: 0;
}
This works because the dropdown menus are already positioned absolute and the containing parent element list item (nav ul li) is already positioned relative.
You can position absolute elements relative to their parents if their parents are relative.
So all we are doing here is defining the extent of the dropdown menu width to "stretch" from "left to right" of the parent's width.
Code Snippet Demonstration:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
text-align: center;
/*padding: 0 30px;*/
/*float: left;*/
/*font-size: 20px;*/
/*line-height: 60px; */
}
#logo img {
width: 30%;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #254441;
text-align: center;
position: relative;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
text-align: center;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
left: 0;
right: 0;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
/*width: 170px;*/
float: none;
display: list-item;
position: relative;
text-align: center;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' +';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
#logo img {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
text-align: center;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<nav>
<div id="logo">
<img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Short +</label>
Short
<input type="checkbox" id="drop-1" />
<ul>
<li>History</li>
<li>Our Services</li>
<li>Our Aim</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Dropdown Even Longer +</label>
Dropdown Even Longer
<input type="checkbox" id="drop-2" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">More Options +</label>
More Options
<input type="checkbox" id="drop-3" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
</ul>
</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</nav>
In Addition:
You can horizontally center the navigation menu by removing the float rule declared on nested list-items (nav ul li), as this will negate any attempt to align content (unless you use flex-box), then declare text-align: center on the containing unordered list (.menu), as demonstrated below:
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
I want to reposition my navbar. In its current position:
#navbar ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
background-color: #5D2C2C;
/*position: relative;
bottom: 115px;*/
}
#navbar ul li {
float: left;
/*position: relative;
left: 420px;*/
}
#navbar li li {
display: none;
}
#navbar li:hover li {
display: block;
width: inherit;
}
#navbar a {
font-family: "Palatino Linotype";
color: #FFF;
text-decoration: none;
padding: 2px 5px;
}
the dropdown displays correctly
but when I remove the /* comments */ so the bar is correctly positioned, the menu drops down but the two items aren't showing and I cannot find out why
the HTML if needed:
<div id="navbar">
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritme Signals: Letters</li>
<li>Maritme Signals: Numbers </li>
</ul>
</li>
</ul>
I am new to website design, and there are a few flaws in my navbar that I cannot fix.
I cannot get the navbar to center properly.
When the screen resolution changes, the list overflows into the next line.
there is 1 list element that is sized differently and I cannot seem to figure out why.
Here is the code:
https://jsfiddle.net/b02nm6ae/#update
CSS:
.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}
.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0;
padding: 0;
}
.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}
.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after {
content: '\25BE';
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
HTML:
<body>
<!-- NAV -->
<div class="nav_wrapper">
<ul class="nav">
<li>Home</li>
<li>Calandar</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor</li>
<li>History</li>
<li>About Byzantines</li>
</ul>
</li>
<li>Mass Times</li>
<li>Contact Us</li>
</ul>
<div>
<!-- SECTION 1 -->
</body>
</html>
Once you float the li then centering becomes problematical. In these instances, it's often preferred to use display:inline-block and center then by applying text-align:center to the parent ul.
This does have a white-space downside but there are methods around that, one of which (font-size) I have used here.
As for the single element with the greater height...that was caused by the pseudo-element...so slapped a quick patch over it. Frankly, I would be applying a class to the parent li and using a pseudo-element on the li but that's another debate entirely.
body {
font-family: 'Didact Gothic', sans-serif;
padding: 0;
margin: 0;
background-color: #CCCCFF;
}
.nav_wrapper ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
/* remove whitespace */
}
.nav_wrapper ul li {
list-style: none;
display: inline-block;
vertical-align: top;
background-color: #993300;
position: relative;
font-size: 1rem;
/* font-size reset */
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
top: 100%;
left: 0;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: block;
width: 100%;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
position: relative;
width: 100%;
}
.nav_wrapper ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover {
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul> li > a:after {
content: '\25BE';
line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
<div class="nav_wrapper">
<ul class="nav">
<li>Home
</li>
<li>Calendar
</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor
</li>
<li>History
</li>
<li>About Byzantines
</li>
</ul>
</li>
<li>Mass Times
</li>
<li>Contact Us
</li>
</ul>
<div>
Well I notice that if I set a 25 pixel height to
.nav_wrapper ul li a
that removes the extra space for example..
.nav_wrapper ul li a{
height:25px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
https://jsfiddle.net/b02nm6ae/9/
When I place the width of by web page as 100% it fits to the browser. But when I re-adjust the size of the browser the navigation bar I used overlaps and all the positions go wrong. I can't figure out the mistake yet. I will post the css and the html code below. Please someone help me to fix my web page.
HTML:
<div class="main">
<div class="header">
<div class="logo12">
<h2 style="position:absolute; left:20px; top:2px; color:#FFFFFF;">
<a>
<font face="verdana">PHIS</font>
<small>Public Health Information System-Sri Lanka</small>
</a>
</h2>
</div>
<div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>
Services
<ul id="SubNav">
<li id="AccessFormPHI">Data Entry</li>
<li id="DataEntry">Edit Temporary Forms</li>
<li id="ViewData">View Data</li>
<li id="ViewAggregatedData">Data Aggregation</li>
</ul>
</li>
<li>Help</li>
<li>
Profile
<ul id="SubNav">
<li id="AccessForm">View and Maintain Profile</li>
<li id="ChangePassword">Change Password</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
/* Height of the navigation bar became shorter */
.main {
width: 100%;
font: 13px Georgia, "verdana", "Times New Roman", Times, serif;
color: #FFFFFFF;
background-color: #F2F2F2;
height: 1000px;
left: 0px;
}
/* No difference was appeared*/
#cssmenu {
position: absolute;
top: 100px;
left: 0px;
}
/* Adjust the olor of the navigation bar */
.logo12 {
position: absolute;
padding-top: 10px;
/*padding-left: 60px; */
top: 0%;
height: 6%;
width: 100%;
left: 0px;
background: -moz-linear-gradient(top,#084B8A ,#0B173B);
}
/* Adjust the place where navigation */
#menu {
position: absolute;
left: 45%; /* change to 390px to 350px */
top: 20px;
display: inline;
}
#menu ul {
margin-left: auto;
margin-right: auto;
width :700px; /*change to 60% to 800px*/
}
/* upto now no difference */
#menu ul li {
display: inline;
float: left;
list-style: none;
position: relative;
height: 60px;
width: 130px;
padding-bottom: 20px;
font-size: 13px;
}
/* Adjust the width of the sub navigation bar */
#menu ul li ul li {
float: left;
list-style: none;
position: relative;
height: 30px;
width: 180px;
font-size: 12px;
}
/* Adjust the color of the sub navigation bar */
#menu li ul {
margin: 0px;
padding: 10px;
display: none;
position: absolute;
left: 0px;
z-index: 99;
top: 28px;
background: -moz-linear-gradient(top,#084B8A ,#0B173B); #726E6D; /*Menu Hover Color*/
border: 1;
}
#menu ul li:hover ul {
display: block;
width: auto;
}
/* Upto now no difference was visible */
#menu li li {
list-style: none;
}
/* Color of sub navigation bar letters became gray */
#menu li li a {
color: #FFFFFF;
text-decoration: none;
}
/* Letters hover color red in the sub navigation bar */
#menu li li a:hover {
color: #900;
text-decoration: none;
}
/* Upto now no difference */
li#main1 {
padding-top: 0px;
}
/* Main navigation bar disappeared */
#menu a {
padding-right: 25px;
text-decoration: none;
letter-spacing: -1px;
font-size: 1.2em;
color: #BDBDBD;
font: cambria;
}
/* Upto now no difference */
#menu ul li a:hover {
/* background: #D8D8D8; /*a tag hover color*/
padding: 5px; /*change to 12px to 5px*/
left: 0px;
}
You can use relative width for CSS,for example:
.main, .header{width:100%;}
Add white-space: nowrap to your navigation CSS. I know this is an old post, but seems to have no solution yet.