I would like to add a CSS-only drop down menu to a site. I am able to do this with just one drop, but am having trouble with adding another tier to the menu.
I am able to get the list to hide initially, but when the trigger is hovered over, the entire list becomes visible, instead of just the first tier of the drop down list.
This is part of the list:
<ul id="DealerNav">
<li>Order from your dealer
<ul>
<li>BFC Syringe (empty)
<ul>
<li>Atlanta Dental</li>
<li>Benco Dental</li>
</ul>
</li>
<li>BFC Complete
<ul>
<li>Practicon Dental</li>
</ul>
</li>
<li>Vaccu•sil Heavy Body
<ul>
<li>Atlanta Dental</li>
<li>Benco Dental</li>
<li>Burkhart Dental</li>
</ul>
</li>
</ul>
And, this is the CSS that controls it:
#DealerNav { margin: 0; padding: 0; font-weight: bold; }
#DealerNav li { list-style-type: none; font-size: 100%; position: relative; margin-left: -3em; }
#DealerNav li li { margin: 2px 0; }
#DealerNav li ul { display: none; }
#DealerNav a.first { width:100%; color: #555; background-color: #FFF; margin-left: 2.5em; }
#DealerNav a { display:block; width: 12em; padding: .5em; background-color: #CEF; color: #FFF; }
#DealerNav a:hover { color: #555; }
#DealerNav a:hover.first { color: #CEF; }
#DealerNav li:hover ul { display: block; }
#DealerNav ul ul { margin-left:10em; margin-top: -2.25em; }
Is this too complicated to ask help on?
The page in question is temporarily at:
http://www.hodentalcompany.com/pages/syringe2.html
The menu is at the bottom of the right column on the text, "Order from your dealer"
Thanks everyone for any help!
Change this:
#DealerNav li:hover ul { display: block;}
to this:
#DealerNav li:hover > ul { display: block; }
You only want the first child UL to show, not all of them.,
Like this?
http://jsfiddle.net/kboucher/nrAPu/
Related
As the first step in making my menu responsive, I want to add a media query in css to change the way the menu displays so that each list item is displayed vertically below the previous item, with it's own submenu items displayed below it before the next list item is displayed. Hope that makes sense. Here are the HTML and CSS that make the menu work in the desktop version of the site:
HTML
<nav>
<img id="logo" src="#logoUrl">
<ul>
<li class="#(CurrentPage.Url == "/" ? "current" : null)">Home</li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current" : null)">
#item.Name
#if (item.Children.Where("Visible").Any())
{
var subMenuItems = item.Children.Where("Visible");
<ul>
#foreach (var sub in subMenuItems)
{
<li>#sub.Name</li>
}
</ul>
}
</li>
}
</ul>
<br class="clear">
</nav>
(This is on Umbraco, so forgive all the Razor bits)
CSS
#logo {
float: left;
margin-right: 25px;
}
nav {
width: 100%;
height: auto;
background-color: #354a49;
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: #fefce9;
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
nav ul li:hover {
border-bottom: 2px solid #fefce9;
background-color: #a1b0af;
}
nav ul li:hover > ul {
display: block;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav ul li ul li a {
color: #fefce9;
}
nav li.current {
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav li.current > a {
color: #fefce9;
font-style: italic;
}
And here is the CSS I have in my media query at the moment:
#logo {
margin-right: -50px;
}
nav > ul > li {
float: none;
margin: 0px;
}
nav ul ul {
width: 100%;
}
nav li.current {
background-color: inherit;
}
That displays the main menu items one below the other OK, but when I try to change things so that the submenu items appear between the menu items I just end up with the submenu items appearing over the top of the menu items and each other.
EDIT
Here's the rendered HTML as requested:
</nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home</li>
<li>
About us
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li>
Being a Tenant
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li>
News
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
Your second level ul is position: absolute; which means it's taken out of the normal document flow and won't take up space in relation to any other elements. Try changing absolute to relative. That should keep the items correctly positioned in the menu.
nav ul ul {
display: none;
position: absolute; /* <--- Try changing this to relative. */
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
Also, the fixed height on your top-level li doesn't let the element grow past 50px. Try setting that instead to a min-height:
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px; /* <-- min-height: 50px */
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
That worked in this fiddle but led to awkward jumping when the sub-menu was hovered and then un-hovered.
Also, consider your use-case - if you're doing this to support tablet/mobile devices the :hover state won't work the same way it doesn't when you're using a mouse. Users would have to know to press to the side of the "About Us" link text to see the dropdown, otherwise they'll get taken directly to the "About Us" page without seeing the :hover state. It might be necessary to either show all the items in a tree structure or use JavaScript to add additional functionality for the submenus.
Here's a decent solution to a responsive sub-menu without JavaScript, but it also doesn't use links for top-level menu items that have sub-items.
I have a nav that holds a ul with several ils. The problem is that im unable to get rid of the ul's first and last child's divider.
here's a demo: http://jsfiddle.net/Rvs3C/1/
i've added this code to my CSS file but seems like it makes no difference:
nav ul a li:first-child{
content: none;
}
nav ul a li:last-child{
content: none;
}
You markup is wrong. The corret way is <a> tag being the children of tag <li>.
The way you made the correct selector would:
nav ul a:first-child li{
content: none;
}
nav ul a:last-child li{
content: none;
}
But remembering, this is not the right way to do.
The correct is change you html to:
<ul class="showing">
<li>home</li>
...
As mentioned elsewhere your HTML structure is off, li must me a direct child of ul, no other element as a child is valid. With this said, you also need to change your selectors per the below.
Updated Fiddle
HTML
<nav>
<ul class="showing">
<li>home
</li>
<li>about me
</li>
<li>content
</li>
<li>browse
</li>
<li>rate
</li>
<li class="nav_arr"><img src="http://www.irvinewelsh.net/images/arrow-left.png" />
</li>
</ul>
</nav>
CSS
nav {
margin-right: 150px;
}
nav ul {
background-color: #494A4C;
overflow: hidden;
text-align: right;
}
nav li img {
margin-left: 20px;
vertical-align: top;
}
nav ul li a {
color: white;
text-decoration: none;
font-family:arial;
font-size: 14px;
padding: 0px;
font-weight: bold;
}
nav ul li:first-child:before {
content: none;
}
nav ul li:last-child:before {
content: none;
}
nav li:before {
content:"|";
padding: 5px;
font-weight: bold;
color:lightblue;
font-size: 20px;
}
nav ul li {
display: inline-block;
}
I have a CSS drop down menu implemented into a website I am working on. It works flawlessly in any browser except for IE.
With IE, the drop downs will appear in a completely different area of the page, making it impossible to click on the links before the hover disappears. I included the code from my .css and .html (changed nav structure to basic for here) files below. This nav is placed into my site's layout via a PHP include, so the area my nav bar is displayed is centered and 230px from the top of the main page.
When I use the DOCTYPE strict mode it will work as expected, however I have other issues then which I can't change, so I'd rather not use a DOCTYPE at all (else I'll be forced to recode the ENTIRE site)
I'm sure there has to be some type of work around for this... even if it doesn't display exactly the same in IE, I just need it to be usable!
Any help is greatly appreciated!! I've spent weeks trying to sort this headache...
CSS FILE:
#catnav {
padding: 0;
clear: both;
height: 32px;
width: 980px;
background: #000;
position: absolute;
top: 230px;
z-index: 100;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 100;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#nav a {
display: block;
line-height: 32px;
margin: 0 0px;
padding: 0;
font-size: 12px;
color: #fff;
font-weight: bold;
}
#nav li a:hover {
color: #fff;
text-decoration: underline;
display: block;
}
#nav li ul {
list-style: none;
position: absolute;
width: 0px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
float: left;
margin: 0;
padding: 0;
width: 120px;
}
#nav li li a {
width: 129px;
height: 24px;
line-height: 24px;
color: #000;
border-bottom: 1px solid #000;
background: #c5c5c5;
margin: 0;
padding: 5px 20px 5px 15px;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background: #8f7c58;
padding: 5px 20px 5px 15px;
}
#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
HTML FILE:
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
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);
//--><!]]></script>
<link rel="stylesheet" href="css.css">
<div id="catnav">
<div id="nav">
<ul>
<li>Title Link 1</li>
</ul>
<li>
<ul>
<li>Title Link2 </li>
</ul>
</li>
<li>Title Link 3
<ul>
<li>Sub Link 1</li>
</ul>
</li>
<li>Title 4
<ul>
<li>Sub Link 1</li>
</ul>
</li>
<li>Title Link 5</li>
<li>Title Link 6</li>
<li>Title Link 7</li>
</ul>
</div>
</div>
How can I make it so that IE will at least display these drops downs under their titles rather than 230px below and to the right of them?
Sounds like a box model problem, there is a great many threads and questions pertaining to IE's implementation of how elements are rendered on pages. I played with your snippets briefly and changed the following CSS section:
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
_margin-top: -230px;
_margin-left: -72px;
}
There is still an issue with the sub-links not showing up directly under the parent link and I don't have further time to respond to your question but this should give you a starting point.
This is a similar problem from 2009 and there is a good discussion among the replies.
I've made a vertical menu using css. It's a menu with sub menus similar to this one:
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
here you can see an example:
It work fine but when I click in one of the sub menus to see the information, the others sub menus disappear, that is the menu stay underneath the text. So if I want to change page by clicking in another sub menu I'm not able, I have to return to home.
Here is my css code:
#menu ul {
list-style: none;
margin: 0;
padding: 3px;
width: 100%;
font-size: 14px;
}
#menu h2 {
color: white;
background: #9370D8;
padding: 4px;
text-align:center;
font-size:15px;
width: 100%;
display: block;
}
#menu a {
color: black;
background: white;
text-decoration: none;
display: block;
font-weight: bold;
width: 100%;
padding:4px;
}
#menu a:hover {
color: black;
background: #eee;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
and html code:
<div id="menu">
<ul>
<li><h2>Browse</h2>
<ul>
<li>Districts</li>
<li><a href="/browse/time/" >Time</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Analyze</h2>
<ul>
<li>Co-occurrence
<ul>
<li><a href="/analyse/co-occurrence/percentage" >Percentage</a></li>
<li><a href="/analyse/co-occurrence/regions" >Regions</a></li>
</ul>
</li>
<li>Geographical
<ul>
<li>Districts</li>
<li>Citizenship</li>
</ul>
</li>
</ul>
</div>
For example I would use the link above. If I click on sub item 2.1 from folder 2, I will see some page with information.
Now I want to see the sub item 1.1 from folder 1, but my problem is when I click in one of the sub menus I'm not able to see the sub item 1.1, so if I want to click in sub item 1.1 I have to return to the main page
the problem is the following:
Any help would be appreciate :)
Thanks!
The problem was the z-index.
I read the tutorials and the front page had an z-index: -1;
and the menu had a z-index: 1;
So the following doesn't work, you have to set something like this:
body
{
z-index: 1;
}
sub-menu
{
z-index: 999;
}
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?