I have this CSS Menu:
http://jsfiddle.net/73GrF/
but i cannot work out what css code i need for the hover:
#nav li a:hover
trigger the hover on your li element. Don't forget to set your submenu position to absolute
#nav li:hover ul {
display:block;
}
http://jsfiddle.net/73GrF/4/ (edited fiddle with crude dropdown styling. ill leave the dressing up to you.)
http://jsfiddle.net/73GrF/5/ is what I came up with while McMastermind was at work.
The main thing I've done is taken the margins off, floated the menu headers, and made the submenus appear on hover
#nav>li {
float:left
}
#nav li:hover ul {
position:absolute;
display:block;
}
#nav li a {
margin:0;
}
Related
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
I am developing a website. In the navbar the Menus are ok but the sub-menus are not working properly. All the submenus are dropping down from the first menu. And sub-menus are disappearing if cursor are not placed to the sub-menus very fast.
The site preview is here : http://ticketsbd.com/
jsfiddle link is here : Fiddle
Add this to the bottom of your stylesheet.
li.has-sub {position:relative;}
li.has-sub ul {top:17px;left:0;}
Man, if you make sub menu and menu, I recommend you for first use this css syntax:
ul > li > a{}
But not ul li a{}
Because all properties will go for all elements li and a in this parent ul.
It makes very cascading effect.
Just work with ul > li, than ul > li > a, than you can work with ul > li > ul, and so on.
It will help you do now something strange things.
For second, you should always set for parent ul and his child li next property
position: relative;
And for sub-menu ul you should always set this properties:
position: absolute;
top: 100%;
left: 0;
It is a minimum which you should know. So keep on this rules and you can styles menus as you like.
Just add display:inline-block to the following classes:
.wrap{
display:inline-block;
}
.nav_list li{
display:inline-block;
border-left: 2px ridge #3D3B3B;
}
fiddle
My list is not display when I hover over it. For the top navigation when I hover over English it should display more languages. http://jsfiddle.net/gTdsX
You could add in your CSS to make the ul submenu be visible on mouseover of the menu item li.
#main-nav ul li:hover ul {
display:block;
}
You didn't have a :hover style for your "main-nav". Simply add this:
#main-nav ul li:hover > ul {
display:block;
}
… and it will work (tested it in your link).
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/
I'm building a navigation with has a drop down unordered list within an unordered list. I'd like to make the list items as wide as at least the "head" list item so that the drop down menu looks right. Just now the drop down menu is thinner as the line items have a lower character count than the line item that contains the unordered list.
I'd like to make somehting of the order:
ul li ul {
{width: *as wide as ul li*;
}
Is it possible to do this without javascript and just within css alone?
Yes, it is. Technically, the ul is already the same width, but it doesn't appear to be due to margins and padding. To change this, use this CSS:
ul li ul {
width:100%;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
You may also want to include the following CSS to change the padding/margin of the li child as well:
ul li ul > li {
width:100%;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
Update
In your specific example (posted in comments), the issue is you've set ul li ul's position value to absolute. This takes it out of it's parent (in regards to handling width), but can be fixed with the following CSS being added to your existing CSS:
ul li {
position:relative;
}
ul li ul {
width:100%;
}
While this allows you to set the submenu to be the same width as the parent, it comes with the side effect of making the menu items wrap (see sui generis menu). To overcome this, use the following CSS instead (in addition to your jsFiddle):
ul li {
position:relative;
}
/* Due to 'min-width', this may not be compatible with all browsers */
ul li ul {
min-width:100%;
white-space:nowrap;
}
width:100%
that should make the child as wide as the parent :)
Try this.
ul li, ul li ul {
width:100px;
}