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
Related
I'm trying to create a drop-down menu but my text-align command wouldn't seem to work (same applies with font-size and other text-related codes). I tried putting my text-align codes in nav ul li and nothing seem to happen. I've also tried putting it on the main .drop-down menu on CSS but it still has no changes. Can anyone help me out here? I couldn't figure out the reasoning behind this.
My HTML and CSS codes are:
nav{
flex:1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
position: relative;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 13px;
transition: all 0.5s;
}
nav ul li a:hover{
color: #E6C7F3;
}
.dropdown-menu{
display: none;
}
nav ul li:hover .dropdown-menu {
display: block;
position: absolute;
left: -35;
top: 100%;
width: 100px;
background-color:black;
opacity: .8;
border-radius: 10px;
}
.dropdown-menu ul{
display: block;
padding-top: 10px;
}
.dropdown-menu ul li{
width: 0px;
left: -58;
bottom: 5;
padding: 10px;
padding-right: 40px;
text-align: center;
}
<div class="navbar">
<img src="image/durra.png" class="logo">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SHOP
<div class="dropdown-menu">
<ul>
<li>Bestsellers</li>
<li>Accessories</li>
<li>Jewelry</li>
<li>Miscellaneous</li>
</ul>
</div>
</li>
<li>FEEDBACK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
text-align works with a element having width. But you have used width: 0px . So it's pretty obvious you cannot use alignment there.
Hi First you have to add padding to ul under dropdown-menu. and then set width of li item to 100%. Please refer below code.
.dropdown-menu ul {
display: block;
padding-top: 10px;
padding: 10px 0 0;
}
.dropdown-menu ul li {
width: 100%;
left: -58;
bottom: 5;
padding: 10px 0;
/* padding-right: 40px; */
text-align: center;
}
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
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>
?
I have two level horizontal menu that works fine.
Second level is not a drop down, it appears on first level menu item click and stays horizontally just under the first level menu.
I need first and second level menu always start from the left side of the container and be full width of the container Currently only first level works like this, but second level doesn't. It starts just under active first level menu item.
You can see it in JSFiddle: http://jsfiddle.net/GrBXa/1/
HTML
<div class="header">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-top-menu-container">
<ul id="menu-top-menu" class="main_nav">
<li><a>H1</a>
<ul class="sub-menu">
<li class="menu-item">Prevent</li>
<li>Avoid</li>
<li><a>P2</a></li>
</ul>
</li>
<li class="current-menu-item">Sol
<ul class="sub-menu">
<li><a>Jan</a></li>
<li>Janu2</li>
<li>Janu3</li>
</ul>
</li>
<li>Why
<ul class="sub-menu">
<li>Electri</li>
<li>Envir</li>
</ul>
</li>
<li>Manag</li>
</ul>
</div>
</nav>
</div>
CSS:
ol, ul {
list-style: none;
}
.main-navigation {
width: 100%;
height: 38px;
border-top: 1px solid #4a4a4a;
}
.main-navigation ul {
}
.main-navigation li, .main-navigation li a {
text-decoration: none;
color: black;
}
#menu-top-menu {
height: 38px;
line-height: 38px;
display: inline-block;
}
#menu-top-menu>li>a {
border-bottom: 0;
white-space: nowrap;
text-decoration: none;
}
#menu-top-menu>li>a, #menu-top-menu>li {
display: inline-block;
text-decoration: none;
}
#menu-top-menu>li >a {
padding-left: 40px;
padding-right: 40px;
}
#menu-top-menu>li:hover, .main-navigation ul>li>a:hover {
background-color: #061361;
}
.sub-menu {
display: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
background-color: #061361;
height: 26px;
line-height: 26px;
}
.sub-menu li {
display: inline;
}
.sub-menu li a {
display: inline-block;
padding-left: 14px;
padding-right: 14px;
color: white;
}
#menu-top-menu>li:first-child a {
padding-left: 14px;
}
#menu-top-menu li.current-menu-item ul, #menu-top-menu li.current-menu-parent ul {
display: inline;
}
#menu-top-menu li.current-menu-item a, #menu-top-menu li.current-menu-parent a {
background-color: #061361;
color: white;
}
I believe that this could be done using some relative positioning, but I was not able to achieve this. I have problems with positioning. Please, give me some guidelines.
Add left:0; width:100%; to your .sub-menu rules.
.sub-menu {
display: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
background-color: #061361;
height: 26px;
line-height: 26px;
left:0;
width:100%;
}
jsFiddle example
Hmmm, I'm a little unclear as to what you were looking for - however, I'll try to help out how I can.
I added the following styles to your existing CSS definitions:
#menu-top-menu {
position:relative;
}
.sub-menu {
left:0;
bottom:-26px;
margin-left:40px;
width:100%;
}
You'll note that I did use position:relative, as you suspected would be the case. Here's an updated JSFiddle demonstrating what these additional styles achieve.
If this isn't what you were looking for, feel free to let me know and I'll be happy to help you further. Good luck!
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 ; }