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.
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 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.
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}
I have a drop down menu which has the following html structure:
<ul class="menu">
<li>Menu Item 1
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
</ul>
</li>
</ul>
and I have the following css rules:
.menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
I'm using javascript to show the drop down menu.
The issue I have is that the sub-menus are appearing below a slideshow which I have close to the navigation. No matter how high or how low I set the z-index of .sub-menu, nothing changes.
Does anyone know what could possibly trigger z-index to not work at all?
Thanks.
EDIT: The issue is with all browsers. Testing in Firefox, Chrome and Internet Explorer
I think I have found the issue. I was using opacity on the div containing the menu. For some reason this caused z-index to not work on the sub-menu. I am not sure why this is. It works fine now that I've removed the opacity rule.
Check the z-index of the elements it is supposed to appear above. make sure they are lower.
Also make sure that the parent element hasn't got the overflow hidden.
Set the Z-index of the parent and then set the Z-index of the child.
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
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>