I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li>Accueil</li>
<li>CV</li>
<li>Enseignement
<ul>
<li>Plans de cours</li>
<li>Leçons</li>
<li>Powerpoints </li>
</ul>
</li>
<li>Recherche
<ul>
<li>Italia</li>
<li>Livres</li>
</ul>
</li>
<li>Liens</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?
Related
* {
margin: 0;
padding: 0;
}
/* Formats the Navigation bar */
nav {
width: 100%;
height: 60px;
background-color: #2a2a2a;
}
/* Formats the page title */
nav p {
font-family: arial;
color: #fff;
font-size: 24px;
line-height: 55px;
float: left;
}
/* formats the navlinks to the left */
nav ul {
float: left;
}
/* formats the navlinks to left */
nav ul li {
float: left;
list-style: none;
position: relative;
}
/* formats the text in the list for nav bar */
nav ul li a {
display: block;
font-family: arial;
color: #fff;
font-size: 14px;
padding: 22px 14px;
text-decoration: none;
}
/* styles the drop down */
nav ul li ul {
display: none;
position: absolute;
background-color: #2a2a2a;
padding: 3px;
border-radius: 0px 0px 3px 3px;
}
/* Displays when hovered */
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: grey;
}
<nav>
<ul>
<li>Home</li>
<li>Teams
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
Hi guys i cant seem to understand whats going on. I've tried everything i can but i can get the text to align to the left like in default html. I have a home page that looks like this:
<?php include ("navBar.php") ?>
home
Thats it and for some reason "home" ends up half way across the page, i have included the defaults margin and padding to the top of the stylesheet but its not working. Any help will be great thanks.
I see there is nav ul li a class, and it has a display value block. Try doing it to inline-block instead and see if it works.
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
My CSS code is not allowing the sub nav to stay open allowing the user to be able to select an option. What am i missing? I believe it is something to do with the last CSS style. As it is now it shows when you mouse over. As soon as you start to move your mouse down to select an option it disappears.
Please could someone help:
HTML
<div id="navigation_bar">
<ul>
<li id="">Home</font></li>
<li>Beauty Treatments
<ul>
<li>Manicure & Pedicure</li>
<li>Gel Manicure & Pedicure</li>
<li>Waxing</li>
<li>Facials</li>
<li>Make-up</li>
<li>Eye Treatments</li>
</ul>
</div>
CSS
#navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation_bar ul li {
float: left;
}
#navigation_bar ul li a {
display: block;
padding: 0 20px 0 20px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #222;
font-weight: bold;
text-decoration: none;
line-height: 36px;
border: none;
}
#navigation_bar ul li a:hover {
border: none;
color: #ffffff;
background-image: url(Images/mouse_over_background.gif);
z-index: 1;
}
#navigation_bar ul li ul li {
float: none;
z-index: 2;
}
#navigation_bar ul li ul {
position: absolute;
display: none;
}
#navigation_bar ul li:hover ul {
display: block;
}
Simple bug
Your error:
CSS:
#navigation_bar ul li a:hover{
border:none;
color:#ffffff;
background-image:url(Images/mouse_over_background.gif);
z-index:1;
}
What it should be:
#navigation_bar ul li a:hover{
border:none;
color:black;
background-image:url(Images/mouse_over_background.gif);
z-index:1;
}
I have had a look at the Fiddle and corrected the missing </li> tag. Now the code works the way im seeing not that it is working fine in the fiddle. I have updated the fiddle: http://jsfiddle.net/CtPcA/1. The background image is a purple block say on hover and the text then changes to white
I have a very strange padding on my menu. The padding appears both on the top of the menu buttons and below the second level menu buttons.
I have experimented with all sorts of combinations of margins, borders and padding but I just cannot get rid of this extra bit of color!
*JUST A NOTE: people have recommended (and deleted their comment) I delete the CSS:
margin-top: -0.5em;
However, I would like this to stay put if possible.*
Unfortunately, I cannot post a picture as I need more reputation points (am a new to coding and even newer to Stackoverflow) but if anyone can take a look at my code below and see where I have gone wrong that would be great!
My HTML Code:
<ul id="menu" >
<li style="margin-left: 3em;">Home</li>
<li class="sub">
Our Services
<ul>
<li>Solar PV</li>
<li>Air Tightness Testing</li>
<li>Thermal Imaging</li>
<li>Wind Turbines</li>
<li>Energy Consultancy</li>
</ul>
</li>
<li>Recent Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
My CSS code:
#menu {
margin: 0;
padding: 0;
background: #201f5f;
height: 3em;
list-style: none;
font-family:arial;
}
#menu > li {
margin-right: 3em;
margin-top: -0.5em;
background:#201f5f;
vertical-align: bottom;
}
#menu > li > a {
height: 3em;
color: #ffffff;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}
#menu > li > a:hover {
color: #41A044;
text-decoration: underline;
}
#menu > li.sub {
position: relative;
}
#menu > li.sub ul {
font-size:15px;
margin: 0;
padding: 0;
list-style: none;
background: #000000;
position: absolute;
top: -1000em;
width: 649px;
left:-87px;
}
#menu > li.sub ul li {
display: inline-block;
}
#menu > li.sub ul li a {
height: 100%;
display: inline;
float: left;
padding-left: 0.4em;
padding-right: 0.4em;
padding-top: 0;
padding-bottom: 0;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu > li.sub ul li a:hover {
background: #41A044;
text-decoration: underline;
position: relative;
}
#menu > li.sub:hover ul {
top: 2.15em;
}
#menu{
text-align:center;
}
li{
display:inline-block;
}
I thank you in advance for your help!
I removed a margin value you had set DEMO http://jsfiddle.net/gSCr4/4/
margin-top: -0.5em; //Removed
I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help.
Here's my HTML code:
<div id="container">
<ul id="nav">
<li class="active">Home</li>
<li>Teaching Assistants</li>
<li>Course Info</li>
<li>Time Table</li>
</ul>
</div>
and Here's the CSS file:
#container {
position: relative;
top: -2em;
z-index: 2;
width: 1200px;
margin: auto auto;
}
#nav {
position: relative;
float: left;
margin-left: 400px;
}
#nav li {
list-style: none;
float: left;
border-right: 1px solid #afc4cc;
}
#nav li a {
position: relative;
z-index: 2;
float: left;
padding: 5px 45px;
font-size: 15px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
color: #39aea8;
}
ul, li {
margin: 0;
padding: 0;
}
ul#nav li a:link,ul#nav li a:visited {
color: #39aea8;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #f4ba51;
text-decoration: none;
}
There's something wrong with your CSS code. Just replace this:
ul#nav li a:hover,ul#nav li a:active{
}
with this:
ul#nav li a:hover,ul#nav li.active a{
// here styling
}
and you are good to go. You just made a mistake while calling the active class in CSS.
ul#nav li.active a { color: #f4ba51 ; }