I would like to float the dropdown menu on other items.But below code shows the dropdown menu but dropdown menu is under the items. I have used the z index but it not works fine for me . May be wrong execution of z index.
<style type="text/css">
li.css3videos ul {display: none;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
</style>
<div id="css3navigation" style="position:absolute;top:119px;">
<nav id="css3mainnav"> <ol>
<li class="css3videos">Videos
<ul>
<li>Trailers</li>
<li>Movies</li>
</ul>
</li>
So, it sounds like the problem you're having is that the drop-down menu, when dropped down (or open), is showing up behind the elements that are physically lower on the screen than the main menu. Is that right?
Make sure your menu parent ha both a position value as well as z-index value, and ALSO make sure the objects you want your menu to appear over the top of have position values too. You can assign z-indexes to them as well if you want to be thorough.
Related
I have been searching to find the answer for this, but without luck. I have a drop down menu where I want the font size of the sub menu to be smaller. I can get part of it to change sizes but on the hover I am pretty sure it is inheriting the styling from the nav bar. When I change the size that is on the nav bar the sub menu font size changes, but so does the nav bar hover, which is no good. I have tried several work arounds in the style sheet but nothing seems to be able to over ride the nav bar.
Right now I have the following working:
<li class="dropdown">
<a class="page-scroll dropdown-toggle" data-toggle="dropdown" href="#">Christy Lodge<span class="glyphicon glyphicon-menu-down"></span></a>
<ul class="dropdown-menu">
<li>View Our Rooms</li>
<li>Room Request Form</li>
<li>Map-Christy Lodge</li>
<li>Policies/Procedures</li>
</ul>
</li>
The page url is at:
http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html
It is the last menu item. I want the sub menu font to be 10px and the hover to be 10 px as well.
I am sure I will get close to fixing this, but any help is greatly appreciated. Thanks so much. -Beth
Looking at your css, something like this should work:
.navbar-default .nav .dropdown-menu li a,
.navbar-default .nav .dropdown-menu li a:hover {
font-size: 10px;
}
Adding classes to everything is good practice - especially if you ever want to change the CSS without refactoring your HTML.
But you can target the sub-menu like so:
.dropdown li { font-size: 12px; }
This targets all li that are nested within .dropdown. There are some other selectors that are really useful, too. Check out the Lobotomized Owl for a larger list, but this is immediately relevant:
li > li: targets an li that is the immediate child of another (not one that is nested two or more levels below - like, grandchildren or whatever).
I have a menu on the website and it has sub menu also which open On hover.
Menu is working great but Sub menu is not starting from first li so that it can act as Mega menu.
I though it can be accomplished by below line
#ayurmenu ul li:hover > ul {
left: 0px;
}
But it is not working. Below is the link to JSFiddle. Please check.
JS Fiddle here for Menu
Ps: Also for About Us, sub menu shall start from same li, not from first li.
The li elements in the top level navigation (ie Home, Home Remedies, etc), can not have a relative position (position:relative;) to its parent ul.
You will need to make these li elements static. If you need the sub menu li elements to be relative then that's another story, but in order to push every to the left (under the first li), then the top level li elements need to be static.
http://jsfiddle.net/fwLgd99c/2/
So i never created a drop down menu before.
my question is how can i a texture for my navigation menu?
i have the html code:
<div id="nav">
<ul class="bar">
<li></li>
<li></li>
<li></li>
<li>Guitars</li>
<ul>
<li>Fender</li>
<li>Yamaha</li>
</ul>
</ul>
</div>
So i want to add a texture to all the navigation menu and submenus how can i do that?
can i use background-image:('images/texture.png'); ?
I have a transparent image and how can i make the navigation menu horizontal?
Thank you very much for your time.
For the background image, use url() (spec):
background-image: url('images/texture.png');
...but I don't see the point if the image is transparent.
To make the menu horizontal, use floating or inline-block elements:
.bar > li {
display: inline-block;
}
or
.bar {
overflow: auto; /* Different than visible, to clear floating */
}
.bar > li {
float: left;
}
I guess it depends on what you want the texture on?
If you just want your submenu to have the texture
It would be something like
ul.bar li ul {background-image: url('images/texture.png');}
You could also drop the background-image to background and add your repeats or center or top or whatever in the short version
ul.bar li ul {background: url('images/texture.png') repeat center top;}
Hope this helps!
I'm building a website based on 960 grid system (www.960.gs),
and I've encountered a problem.
I want to put drop down menu but with no success. I tried many tutorials
but i only got more confused.
Is there a way to create a menu for this kind of website?
this is the website by the way:
My website
Thank you for you help.
The best way to do this by using just CSS is by using absolute positioning on the contents of your drop-down, and have another unordered list inside each li that needs drop-downs.
So the markup looks like this:
<ul id="nav">
<li><a>Nav Item with dropdown</a>
<ul id="dropDown">
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
</ul>
</li>
</ul>
You will then set #nav li (or #nav li a) to position:relative; and have the #nav li ul set to position:absolute; with it's position off the side of the screen using left:-9999px;
Then set the hover of the element you set to position relative (li or li a), while including the child ul:
#nav li:hover ul {
position:absolute;
left:0;
}
This way, on hover, the child element will come into focus underneath the parent menu item.
See it working here.
http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html
Right last item's dropdown goes outside the menu
alt text http://shup.com/Shup/374936/110621146-My-Desktop.png
I need only last last item's submenu inside.
like this
alt text http://shup.com/Shup/374939/1106211810-My-Desktop.png
Firstly, you might want to consider positioning your main menu li's relatively. Then the drop down ul's which are positioned absolutely will appear underneath their corresponding li by default. Like this for example:
ul.dropdown li {
position: relative;
}
Then you can simply add a new class to the last <li class="dir"> which gets its own styling to change the position of the last dropdown menu. Something like this for example:
HTML:
<li class="dir last">
CSS:
li.last ul {
left: -50px; /* or however much you need for it to appear where you want it to */
}
You'll need to set the right position for that particular list i.e.
<li class="dir">Contact Us
<ul style="last-menu">
<li>Enquiry Form</li>
<li>Map & Driving Directions</li>
<li>Your Feedback</li>
</ul>
</li>
<style>
.last-menu{
right: 0px;
}
</style>