I got a reallly simple drop-down menu but got a problem with the submenus width.
See it here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
My HTML is:
<div id="navigation">
<div id="menu-dropdown">
<ul class="menu">
<li class="menu_punkt">Frontpage</li>
<li class="menu_punkt">Who are we?</li>
<li class="menu_punkt">This is a test
<ul>
<li>Your profile</li>
<li>New profile</li>
</ul>
</li>
<li class="menu_punkt">SOS Profile
<ul>
<li>Your profile</li>
<li>New user</li>
</ul>
</li><li class="menu_punkt">Log ind</li>
</ul>
</div>
</div>
and my CSS is:
/*horisontal navbar*/
#menu-dropdown {
list-style: none;
position: absolute;
top: 600px;
}
#menu-dropdown ul li {
float:left;
list-style-type: none;
font-size: 0.8em;
}
#menu-dropdown li ul {
position: absolute;
display: none;
background-color:#cdc3a2;
padding: 0px;
margin-bottom:1px;
}
#menu-dropdown ul ul li {
clear: both;
}
#menu-dropdown ul li a {
display: block;
padding: 10px;
color:#102B47;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#menu-dropdown ul li a:hover {
background-color: #cdc3a2;
}
#menu-dropdown li:hover ul, li.over ul {
display: block;
}
You can see my problem here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
Regards
- Mestika
Add a width to the submenu anchors
.menu ul li a { width:200px;}
Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus
#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
background-color: #cdc3a2;
}
I think you should add a width to the menu-dropdown ul li class.
A great way to build a css drop down menu is son of a suckerfish.
Yes JAO is right u shoud give width to li like this
#menu-dropdown ul ul li {
clear:both;
width:107px;}
you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/
Try:
.menu ul li li {width: 100%}
when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code
hope it helps :)
Related
So i'm having a huge issue with my navigation. I'm trying to add a drop down menu but no matter what I try its not working out. Below is my current HTML/CSS code and if you have any idea how to fix it please help!! I also attached a picture of what i'm actually trying to make it look like.
Here's the HTML
<div class="logo"><img src="images/original/xlablogoheader.gif" width="auto" height="130"/><span> experimental social science laboratory</span></div>
<div class="menu">
<ul>
<li>About
<ul>
<li>Mission</li>
<li> Staff</li>
</ul>
</li>
<li>Participants
</li>
<li>Researchers
</li>
<li>Connect
</li>
</ul>
</div>
</div>
Here's the CSS
/* Menu */
.menu{float:right; padding:0 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Source Sans Pro', sans-serif;color:#fff; font-size:16px;}
.menu ul li.selected a{color:#000;}
.menu ul li a:hover{color:#000;}
.menu ul ul { display: none; position: absolute; top: 25px }
.menu ul li:hover > ul { display: inherit; color:#000;}
I have modified your code, a little bit, by adding position: relative; to menu class, also some other minor changes, so it works, please check this https://jsfiddle.net/ysmr364m/
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
Original Question
I have a webpage with a css menu. The problem is that the menu is displaying properly except for menu items wit a submenu. I this case the menu items not displaying consistently and the the submenu is not showing at all.
I have uploaded the page at http://prova.webuda.com/account.html. Such a problem occurs with the menu item ACCOUNT.
Also, I have looked at it with firebug and I have seen that the relavant submenu unsorted list is grayed out, which makes me suppose that there must be some parsing issue. However, from my analysis it should be fine.
What am I doing wrong? Can somebody please help me?
Edit
Css
#mainMenu
{
font-size: 0.85em;
}
#mainMenu ul
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
#mainMenu ul li, #mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
font-size:1.7em;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
#mainMenu ul li a, #mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:#006;
}
.mainSubMenu
{display:none;}
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
#mainMenu ul li ul{position: absolute;left:-1px;top:98%;}
#mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}
#mainMenu ul ul{
width:119.7px;
}
Html
<div class="mainMenu" id="mainMenu">
<ul>
<li class="menuItem" id="menuItem1"> Squadra </li>
<li class="menuItem" id="menuItem2"> Biglietti </li>
<li class="menuItem" id="menuItem3"> Abbonamenti </li>
<li class="menuItem" id="menuItem4"> Ritiro </li>
<li class="menuItem" id="menuItem5"> Fidelity Card </li>
<li class="menuItem" id="menuItem7"> <span> Account </span>
<ul class="mainSubMenu">
<li class="subMenuItem"><a class="pureCssMenui" href="profilo.html">Profilo</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati Fatturazione</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="storicoTifoso.html">Storico Tifoso</a></li>
<li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
</ul>
</li>
</ul>
</div>
Most significantly the part which is not working is #mainMenu ul li:hover #mainMenu ul li ul{display:block;}
There are a few issues with your CSS. First, the # selector only works for elements that have the id set to that. For example, #menuItem applies styling to any element with id="menuItem". However, your HTML has class="menuItem", so you must use the . selector instead.
Second, when the menu does appear, it appears too far down the page for the user to see, as per #mainMenu ul li ul{position: absolute;left:-1px;top:98%;} and #mainMenu ul ul ul{position: absolute;left:98%;top:-2px;}.
Here are the corrections:
.mainMenu
{
font-size: 0.85em;
}
.mainMenu
{
margin: 0;
padding: 0;
text-transform: uppercase;
}
.mainMenu ul li, .mainMenu ul li:hover
{
height:50px;
float:left;
text-align:center;
font-weight:bold;
overflow:hidden;
margin-left:1.05em;
margin-right:1.05em;
}
.mainMenu ul li a, .mainMenu ul li span a
{
color:brown;
text-decoration:none;
color:.006;
}
.mainSubMenu
{display:none;}
.mainMenu:hover .mainSubMenu {display:block}
.mainMenu ul li ul{position: absolute;left:1px;top:2%;}
.mainMenu ul ul ul{position: absolute;left:2%;top:2px;}
.mainMenu ul ul{
width:119.7px;
}
And a working fiddle: http://jsfiddle.net/Af7SE/
Also, here is another example of a menu like yours.
The first problem is because your last <a> is nested on a <span>, try using:
<li class="menuItem" id="menuItem7">
Account
<ul class="mainSubMenu">
....
</ul>
</li>
And your menu never show because has a problem with the overflow:hidden; and the static width on your submenu, try using the next code, it will show your submenu but you will need make more changes.
#mainMenu ul li:hover ul{display:block;}
instead of
#mainMenu ul li:hover #mainMenu ul li ul{display:block;}
remove all the overflow:hidden because it hide your submenu, I make some modifications for the example:
http://jsfiddle.net/NrA8A/
#mainMenu ul {
margin: 0;
padding: 0;
text-transform: uppercase;
list-style: none; /*remove the bullets*/
}
#mainMenu ul li, #mainMenu ul li:hover {
.....
/*Remove the overflow :hidden*/
}
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...
I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.