I've looked at all of the questions already posed on this subject, but can't find anything wrong with my coding. I need another person's eye to find what's wrong. There must be something I am just not seeing, as I've successfully made drop down menus before...
Here is my html5 coding for my menu:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
And here is my CSS styling that is attempting to make a drop down menu:
/**** Main Menu ****/
#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}
#menu ul a {
color: #f7f5f1;
}
#menu ul a:hover {
color: #635ccb;
}
#menu ul {
margin-left: 75px;
}
#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
serif;
font-size: 1.1em;
margin-top: 20px;
}
#menu ul ul {
display: none;
position: absolute;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}
#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}
You closed a <li> before I think you meant to. Look here:
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
Should probably be:
<li>
Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
This happens because the li:hover should enable <ul> with display:block's out of <li>
Try this:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
example: http://jsfiddle.net/9zfsr/
Related
I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)
My code is here
http://codepen.io/anon/pen/pJMdqv
HTML
<nav>
<ul>
<li>Home</li>
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
<li>Dictionary</li>
<ul>
<li>Phrases</li>
<li>Onomatopoeia</li>
</ul>
<li>Sentences</li>
<ul>
<li>Beginner</li>
<li>Intermediate</li>
<li>Advanced</li>
</ul>
</ul>
</nav>
CSS
nav {
width: 180px;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
background: #ececec;
}
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Your nesting is off. Instead of:
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
You need to include your submenu ul within the parent li that gets hovered over:
<li>
Lessons
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
</li>
I can't get the hover in my menubar to work. The html and css is below. I can get the display: none to work by itself. I can get the hover to work by itself. They just won't work together. Not sure what I am doing wrong.
This is the html:
<nav>
<ul>
<li><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top">
<li id="menudrop" class="rightbar">Menu</li>
<ul data-toggle="">
<li>Account Settings</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
This is the css:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}
Besides fixing some missing closing tags the main adjustment is to change this
nav ul li ul:hover li {
display: block;
}
into that
nav ul li:hover ul {
display: block;
}
As the nav ul li ul ist set to display:none; it's not possible to set a hover on it.
Adjusted in Fiddle
And without the image:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li id="menudrop" class="rightbar">Menu
<ul data-toggle="">
<li>Account Settings
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</nav>
Having trouble getting the drop-down menus to be directly aligned with the parent ones - at the moment they always fall from the center of the top one, see image.
My code:
body {
background: url('body-bkg.jpg');
background-repeat: no-repeat;
background-position: center top;
}
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
/*controls top parent box in navigation bar*/
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
/*controls top parent box in navigation bar*/
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background-color: hsla(0, 9%, 202%, 0.7);
float: left;
}
#navMenu ul li {
position: relative;
}
/*controls link text parent and children boxes in navigation bar*/
#navMenu ul li a {
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #2e1c1c;
border: 1px solid #000;
}
/*controls children boxes in navigation bar*/
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
/*controls children boxes in navigation bar when hovered on parent box*/
#navMenu ul li:hover ul {
visibility: visible;
}
/*controls parent box when hovered on children box*/
#navMenu li:hover {
background: #387cf7;
}
/*controls child box when hovered on child box*/
#navMenu ul li:hover ul li a:hover {
background: white;
}
<div id="navMenu">
<ul>
<li>Destinations
<ul>
<li>Asia </li>
<li>Africa </li>
<li>Europe </li>
<li>North America </li>
<li>South America </li>
<li>Antartica </li>
</ul>
</li>
<li>Holiday Types
<ul>
<li>Short Breaks </li>
<li>Beaches </li>
<li>Adventure </li>
<li>Walking </li>
<li>Continents </li>
<li>Safari </li>
<li>Cruise </li>
<li>Family </li>
<li>Ultimate </li>
</ul>
</li>
<li>When to go
<ul>
<li>Winter </li>
<li>Spring </li>
<li>Summer </li>
<li>Autumn </li>
</ul>
</li>
<li>Corporate </li>
<li>Special Offers </li>
<li>About Us </li>
<li>Blog </li>
<li>Contact </li>
</ul>
</div>
This solution may work for you:
Demo Fiddle
I see you're using visibility:hidden a lot, but In situations like this I find display: none to be easier to work with.
CSS:
#navMenu ul ul {
// current styles
left: 0px;
}
I am trying to lessen the vertical space between items in the submenu of my drop down navigation bar. You can see what it currently looks like at http://www.mirandabee.com
I am trying to reduce the space vertically, but can't figure it out.
Here is my HTML for it:
<ul id ="nav">
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization
<ul>
<li>One Space at a Time</li>
</ul>
</a></li></ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: -80px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Keep in mind that I am very much a beginner, but I would appreciate any help I can get. Thanks so much!
Your HTML is totally broken. You have
<a><ul><li><a>...</a></li></ul></a>
you cannot have anchors inside anchors like that. Your css also doesn't make much sense. You've got position: absolute, but no position: relative anywhere else, so ALL of the nested <ul>'s are going to be in the wrong place.
Your HTML structure is bad. I'm sorry to say that. But here I try to fix it for you.
Fiddle
HTML:
<ul id="nav">
<li>
About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</li>
<li>
Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</li>
<li>Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</li>
<li>Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</li>
<li>Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</li>
<li>Organization
<ul>
<li>One Space at a Time</li>
</ul>
</li>
</ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: 0px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
I hope it will help you on solving this problem.. :)
I've programmed a css dropdown menu that seems to be working correctly in every browser but Internet Explorer (at least in IE7).
Here's a link to a picture of how it looks when it behaves correctly (not enough rep to post pictures yet):
http : // img535imageshack.us/i/chromeexample.png/
Here's a link to how it looks in IE:
http : // img299.imageshack.us/i/ieexample.png/
If you want to view the whole website, it's at urbanpromise.org
Here's the css menu coding:
.menu{
width: 40em;
height: 2em;
background: #63089C;
float: left;
font-family: helvetica, arial, sans-serif;
}
.menu ul{
list-style: none;
float: left;
padding: .4em .75em;
margin: 0;
text-align: center;
font-weight: bold;
color: white;
}
.menu a{
text-decoration: none;
color: white;
}
.menu ul:hover{
color: black;
background: white;
}
.menu a:hover{
color: black;
background: white;
}
.menu ul ul{
position: absolute;
z-index: 500;
text-align: left;
}
div.menu ul ul{
display: none;
font-weight: normal;
}
div.menu ul li:hover ul{
display: block;
background: #63089C;
border: 0px solid black;
border-width: .125em 0;
}
Thanks in advance for the help.
Edit: Here is the HTML code for the menu:
<div class="menu">
<ul>
<li><span class="h2">Home</span></li>
</ul>
<ul>
<li>Information <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Staff and Board</li>
<li>History and Mission</li>
<li>Media</li>
<!--<li>Speaker Information</li>-->
<li>Contact Us</li>
</ul>
</li>
</ul>
<ul>
<li>Calendars <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>UrbanPromise School</li>
<li>Summer/Afterschool</li>
<li>Volunteer/Supporter</li>
</ul>
</li>
</ul>
<ul>
<li>Programs <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>StreetLeader</li>
<li>Afterschool Programs</li>
<li>UrbanPromise School</li>
<li>Summer Camps</li>
<li>Internship</li>
</ul>
</li>
</ul>
<ul>
<li>Get Involved <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Donate</li>
<li>Volunteer</li>
<li>Workgroups</li>
<li>Store</li>
</ul>
</li>
</ul>
<ul>
<li> Blog
</li>
</ul>
</div>
I tried adding display: inline to .menu with no effect, and when I added it to .menu ul or added it to both this was the result in IE7:
http://img830.imageshack.us/img830/9855/ieresult.png
Edit #2: SOLUTION: I fixed the problem using someone's project on Google Code that uses javascript to make IE behave like a more standard browser. Here's a link!
http: //code.google.com/p/ie7-js/
You probably have either a double margin float bug or a collapsed parent with floats bug.
I'd add display: inline; to .menu and/or .menu ul.