I have been building a CSS drop down menu and I have a slight snag and wondered if anyone could help me fix this. I have a menu that has this HTML
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li>This is sub</li>
<li>sub menu item</li>
<li>This is a long sub menu item</li>
</ul>
</li>
<li>Location</li>
<li>another link</li>
</ul>
</div>
Currently when I hover over the main <li> 'Home' it's width expands a lot, I think to accommodate the sub-class menus that I have. How can I stop this from occurring? To achieve something like:
|Home| // Nice short main tab
|A sub menu link |
|Another sub menu link|
As opposed to this that is currently happening (forgive the crudeness of my diagram)
|Home....................| // really long messing up everything tab
|A sub menu link |
|Another sub menu link|
This is my CSS code for the menu:
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
I have basically the same markup so the following code should work well for what you need.
I left all of the color and image info in case you needed help there too.
#menu {
background: none repeat scroll 0 0 #333333;
border: 0 none;
font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#menu ul {
background: none repeat scroll 0 0 #333333;
height: 35px;
list-style: none outside none;
margin: 0 0 3px;
padding: 0;
width: 100%;
}
#menu li {
float: left;
padding: 0;
}
#menu li a {
background: no-repeat scroll right bottom #333333;
color: #CCCCCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
background: no-repeat scroll center bottom #2580A2;
color: #FFFFFF;
text-decoration: none;
}
#menu li ul {
background: none repeat scroll 0 0 #333333;
border: 0 none;
display: none;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 225px;
z-index: 200;
}
#menu li:hover ul {
display: block;
}
#menu li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: 225px;
}
#menu li:hover li a {
background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
height: 35px;
margin: 0;
padding: 0 10px 0 15px;
text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
background: no-repeat scroll left center #2580A2;
border: 0 none;
color: #FFFFFF;
text-decoration: none;
}
The markup is weird man.
First of all, try to structure it a little better than having the <a> for the home link in the same <li> as another <ul>. Can this link be in a separate <li>?
Also, don't wrap the menu in a <div>. Just apply the styling directly to the parent <ul>.
Related
I've got a simple list driven navigation that looks like this:
Page 1 Page 2 Page 3 My Account
I need 'My Account' to float right:
Page 1 Page 2 Page 3 My Account
Here's the list:
<nav class="nav">
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>My Account</li>
</ul>
</nav>
I added a float:right to the last list item, and that looked great originally, until I shrunk the screen down a little. But then it forced the first three items down a little, so 'My Account' was still aligned right, but sitting up a little higher than the other three. Like this:
My Account
Page 1 Page 2 Page 3
Edit After:
The actual list is more complex than what I posted above. It's got dropdowns and lots of styling. Here's the CSS:
.nav, .menu {
height: 54px;
}
.nav {
background: #004F9D;
clear: both;
display: block;
position: relative;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
z-index:1000;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
min-width: 160px;
font-size: 14px;
}
.nav ul ul li {
float: none;
position: relative;
}
.nav ul ul li a {
color: black;
}
.nav ul ul li a:hover {
background: #428BCA;
}
.menu {
clear: both;
display: block;
overflow: hidden;
}
.menu li {
clear: none;
display: block;
float: left;
padding: 10px 0;
}
.menu li img {
padding-right:10px;
}
.menu li:hover {
background-color: #00aedd;
}
.menu a, .menu span {
background-repeat: no-repeat;
clear: both;
display: block;
color: #fff;
font-size: 14px;
height: 34px;
line-height: 35px;
overflow: hidden;
text-decoration: none;
}
.menu a {
padding-left: 15px;
padding-right: 15px;
}
.menu span {
padding-right: 15px;
}
Here's a solution using the css alignment property, flexbox. Its a little bit cleaner than using floats because it keeps everything in document flow. Just note it supports IE browsers 9 and up
.menu {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li:not(:last-of-type) {
margin: 0 5px;
}
.menu li:last-of-type {
margin-left: auto;
}
JSFiddle
The best way to go something like this is to divide the entire div into equal parts, and use text-align: center; for the first 3 items, and text-align: right to the last one. Do not use float:left, and float:right because it messes the responsive nature of the site.
I have an ul of navigation links nested in a div which is in turn nested into a 'header' div. My header div also contains a banner image, which should display in the top left corner of the website, and next to the banner I want my navigation links, which contain drop down menus when moused over.
Right now I am floating the banner to the left, and the nav links are automatically displaying next to the banner at my desktops resolution. The problem with this method is that once I resize the browser window the nav links begin to wrap around the banner and it looks terrible. Ideally I want the banner and the nav links to stay on the same line no matter the resolution of the device my site is viewed on.
Here is a jfiddle with an example of how my site displays. When I view the site at my default resolution of 1920x1080 it displays fine, but when I resize it does some funky stuff.
<!--- header div containing banner image and navigation bar --->
<div class="header">
<img id="banner" src="img/image.png" alt="Banner image displays here">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>Donations</li>
<li>Volunteering</li>
<li>Housing</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
/* relevent css for header, banner image, and navigation */
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; margin:0px; padding:0px;}
a:link, a:visited, a:active {color:#FFFFFF; text-decoration: none;}
a:hover {color: #C0C0C0; text-decoration: none;}
.header {width: 100%; margin:0; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
#banner { float: left; max-width:100%; margin: 0; padding: 0; border: none;}
#w { max-width:50%; background-color: #FFFFFF; margin: 0; padding: 0; border: none; }
#ddmenu {
max-width: 50%;
height: 68px;
margin: 0 auto;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
cursor: pointer;
outline: none;
font-weight: bold;
color: #8aa8bd;
}
#ddmenu li { display: inline-block; float: left; font-size: 1.00em;}
#ddmenu li a {
display: block;
float: left;
padding: 0 10px;
line-height: 4.9em;
font-weight: bold;
text-decoration: none;
color: #FF0000;
}
#ddmenu li:hover > a { color: #FFF; background-color: #FF0000;}
#ddmenu li:hover ul {display: block;}
/*Fills gap between top level li and nested ul so that the above mouse hover pseudoclass selecting ul works*/
#ddmenu > li:after {
content: " ";
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: 12px;
background: transparent;
}
#ddmenu ul {
position: absolute;
top: 80px;
width: 120px;
background: #fff;
display: none;
margin: 0;
padding: 4px 4px;
list-style: none;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* tooltip arrow */
#ddmenu ul:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 8px;
border-width: 0px 8px 8px 8px;
border-style: solid;
border-color: #fff transparent;
}
#ddmenu ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 4px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
#ddmenu ul li {
display: block;
width: 100%;
font-size: 0.9em;
}
#ddmenu ul li a {
display: block;
width: 100%;
padding: 6px 2px;
line-height: 1.4em;
}
I removed a lot of your styling because there is a lot of CSS to debug, but take a look at this Fiddle. I think it shows a simpler example of the effect you are going for and you may be able to work from the CSS.
Here's a breakdown of the most important parts of the CSS:
.header ul { list-style-type: none; }: don't show bullets
.header li { display: inline-block; }: make the list items sit next to each other horizontally instead of stacking in a column like normal
.header ul ul li { display: block; }: Not for submenus, though. Still want those in a stack.
.header ul ul { display: none; }: Don't show the nested lists...
.header li:hover ul { display: block; }: ...until we hover over the parent
.header li:hover ul { position: absolute; }: binds to nearest non-statically positioned ancestor
.header li { position: relative; top: 0; left: 0; }: which is its parent thanks to this trickery. Remember to specify top and left even if you're not moving anywhere or certain browsers will ignore you.
The rest is just fluff to make it look a little better. Since you're using inline-block to take care of most of the effect, you get resizing and wrapping for free.
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
I am trying to do an image change for a mouseover, in a ul navigation. I can't seem to try to get it to work. Here is my code:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
and the css:
ul#nav {
width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto;}
ul#nav li {width: 126px; height: 33px; float: left; padding: 13px 0 0 0;
font-weight: bold; text-align: center; text-transform: uppercase; }
ul#nav li:nth-child(1) {
margin: 0 60px 0 0;
}
ul#nav li:nth-child(2) {
margin: 0 316px 0 0;
}
ul#nav li:nth-child(3) {
margin: 0 60px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0;
}
ul#nav li a {
color: white; text-decoration: none;
}
ul#nav li a:hover {
color: #660066;
}
basically where I have "home" "about" "portfolio" and "contact" I want to replace with an image that then does a mouseover to a different image, is this possible???
Without javascript, you're going to have to use the background css attribute, and then use the :hover pseudoclass to change the image source.
This website gives a fairly comprehensive overview of using the background attribute.
Basically it will be something like:
#nav li {
background: url(images/image1.png) 0 0 no-repeat;
}
#nav li:hover {
background-image: url(images/image2.png);
}
For some reason my website won't use my styles!
I have this in my stylesheet:
#nav {
margin: 15px 0 15px 0;
padding: 0;
width: 965px;
background: #ffffff;
border-bottom: 0px #f2e9e1 solid;
height: 2.1em;
}
#nav ul {
display: block;
margin: 0;
padding: 0 0 0 10px;
line-height: 17px;
list-style: none;
z-index: 90
}
#nav ul li {
float: left;
margin: 0 1px 0 0;
padding: 0;
font-size: 14px;
letter-spacing: 1.0px;
line-height: 17px;
list-style-type: none;
white-space: nowrap;
}
#nav ul li a {
float: left;
display: block;
width: auto;
font-weight: normal;
background: transparent;
text-decoration: none;
color: #1c140d;
margin: 0;
}
Part of my HTML:
<div id="nav">
<ul class="level1">
<li>Development</li>
<li class="sep">|</li>
<li> Search
<ul class="level2" style="position: absolute; top: 0px; left: 0px; visibility: hidden; ">
<li>Seqqle search by sequence</li>
<li>CViT search tool</li>
<li>Leggle search</li>
</ul>
</li>
But my developer tools says that the matched CSS rules for the first <li> is li instead of #nav ul li.
Any idea?
Just an idea, but make sure your stylesheet is actually being loaded. Unless you've changed something in your browser, there is no reason those styles shouldn't be working.
Also, if you can, provide a URL we can look at.
Your HTML / CSS seems to be working as intended; I can see that the | turns red when I add color: red; to the #nav ul li rule. There must be something else (style sheet garbled or not loaded, other code) going on here.