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/
Related
I have a menu that is made up of ul and li the list items nest SVGs as the items that will show up in the menu. inside the first ul, li nested another ul,li that shows up on hover as a submenu, everything works fine but I want to create a gap filler around my SVGs in the item menu so that when I hover a little bit away from the image, the sub menu would still appear.
I searched that and find some ways involved using the pseudo class ::after, but did not manage to make it work
This is my code
<div id="menu">
<ul>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link2/li>
</ul>
</li>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link</li>
</ul>
</li>
the css is
#menu ul li{
width:auto;
height:2.5em;
list-style:none;
float:left;
margin: 0em 20px 0em 20px ;
padding: 0px ;
cursor:pointer;
justify-content:space-between;
#menu ul ul li{
float:none;
width:100%;
height:auto;
padding: 1em 0;
text-align:center;
#menu ul li:hover > ul{
display:block; }
#menu ul li img{
width:inhrtit;
height:inherit;
margin: 0 0 60px 0;
position:relative;
bottom:0.6em;
}
#menu ul li:hover > ul::after{
width:auto;
height:2.5em;
padding:0px 100px;
margin: 90px;
position:absolute;
right:70px; left:90px;
pointer-events: none;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
#menu ul li:hover > ul::after {
pointer-events: auto;
}
Sorry my code is lousy. as the first question I hope this is not an enough dump one.
Since you're looking to increase the hover area of <li> elements, you can add padding to them.
For example, below is an example of using padding to increase the clickable area. Increasing hover area is similar.
https://jsfiddle.net/gazg1yuy/
I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.
I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?
HTML Code:
<ul id="Menu">
<li>Home </li>
<li>Info
<ul style="display:none;">
<li>Program</li>
<li>Getting Started<li>
<li>Credits</li>
</ul>
</li>
<li>Video </li>
<li>server </li>
<li>Profile </li>
<li>Help</li>
</ul>
CSS Code:
#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}
#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}
Help in advanced. any help is apreciated :)
also post a code not only telling me whats wrong thanks!
use #Menu before your css class names : DEMO
like: #Menu li:hover > ul {display:list-item;}
NOTIC: css Class names are Case-Sensitive
I am thinking this is because the html code contains an inline display:none.
In the inner <ul>, we should remove <ul style="display:none;"> in the above html.
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 have a navigation menu with this style. The menu is perfect on Chrome, but other browsers and some Firefox versions, the menu shows up as 2 lines. I cannot get this line of CSS "padding: 0 0.73em;" to work on all browsers.
.mainnav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.mainnav ul li {
float:left;
}
.mainnav ul li a:link,.mainnav ul li a:visited {
display:block;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-color:#B79527;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
margin:0;
padding: 0 0.73em;
height: 28px;
line-height: 28px;
position:relative;
white-space:nowrap;
}
.mainnav ul li a:hover,.mainnav ul li a:active {
background-color:#9A7C1C;
}
#firstmenu {
background:#7A4AAD;
padding-left: 6px;
}
Here is the HTML
<div class="mainnav">
<ul>
<li id="firstmenu">Home</li>
<li>Group News</li>
<li>About us</li>
<li>Vision Message and Mission</li>
<li>Group Activity</li>
<li>Chairman's Message</li>
<li>Jobs</li>
<li>Contact us</li>
</ul>
</div>
Even Firefox gives me different results on different machines.
you are aware that in: .mainnav ul li a:link,.mainnav ul li a:visited there are double padding decalarations?
padding:4px;
padding: 0 0.73em;
You can combine those:
padding: 4px 0.73em;
Seems that the issue with the navigation list is that there is too much spacing in between them in combination with the amount of items.
I there are too much items, the normal behavior is the wrapping, you could decrease spacing, font-size to fix this.
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 :)