I am try to make drop down menu but i don't know why when ul hover than drop down li not appear correctly i have use z-index and also use position relative.Please check this on top menu.
Css
#menu > ul > li:hover ul {
display:inline;
}
#menu ul li ul{
position:relative;
display:none;
list-style: none;
margin:0px;
width:200px;
z-index:1000;}
Html
<div id="menu">
<div class="home-icn">
<i class="icon-home"></i>
</div>
<ul >
<li><a id="print_menu" href="">Printing</a>
<ul id="drop_menu_f">
<li><a>Business Cards</a></li>
<li><a>Brochure</a></li>
<li><a>Door Hangers</a></li>
<li><a>Envelopes</a></li>
<li><a>Flyers</a></li>
<li><a>Invoice Books</a></li>
<li><a>Magnet Cards</a></li>
<li><a>Note Pads</a></li>
<li><a>Post Cards</a></li>
<li><a>Plastic Cards</a></li>
<li><a>Posters</a></li>
<li><a>Presentation Folders</a></li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/hnTyB/1/
<div id="menu">
<ul>
<li>My Menu
<ul>
<li>thing</li>
<li>thing2</li>
</ul>
</li>
</ul>
</div>
I made a js fiddle of what it appears you are trying to do. Copying your css exactly, this seems to work for me. Could it be your html and css don't correctly match?
I checked out your site soniprinting.com (saw the URL in your screenshot) and it looks like you are missing a z-index from your #menu ul.
Add a z-index greater than those of the slideshow, and you should be able to see your dropdown just fine.
Related
I want to place "Shop by category" beside the ebay logo using margin-left and margin-top.
margin-left is not working or pushes some elements with it index.html
.navclass >ul >li{
list-style-type:none;
display:inline;
padding:5px 25px;
//float:left;
margin-top:1px;
margin-left:20px;
border:1px solid black;}
in the html i made the image and search in a separate div
and added this down
</div>
<nav class="navclass">
<ul>
<li>Shop by <br> Category
<ul class="sub-menu">
<li>Collectibles&art</li>
<li>Electronics</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
</ul>
<span class="arrow">▼</span>
</li>
</ul>
</nav>
Why not to use float:left; in css for logo and nav? You will get what you want and i think that will work better. Because margins can not work with different size screens i think.
I'm using a template, HTML5UP - Miniport, for my web design class - I'm just beginning to learn to code. In order to meet the specification for my class I needed to add submenus/drop-down navbar. This works fine in desktop mode, but when I decrease the size of the windows, I get some problems. The submenus stay inside the fixed navbar, pushing their way between other menus items. Here's a link to what it currently looks like:
https://jsfiddle.net/OrangeJones/9u0seLxu/
The CSS is in the fiddle link, but here's my HTML.
<div class="nav">
<ul class="container">
<li><a class="jumper home" href="#top">Home</a></li>
<li><a class="jumper about" href="#about">About</a>
<ul>
<li>Resume</li>
</ul>
</li>
<li><a class="jumper portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="jumper blog" href="#blog">Blog</a>
<ul>
<li>Best of the Twin Cities</li>
</ul>
</li>
<li>
<a class="jumper contact" href="#contact">Contact</a>
</li>
</ul>
</div>
How can I get it to where the submenus drop down when hovered over or clicked on in small screens instead of taking up main navbar space.
Thank you!
Your CSS for the submenu to show and hide is inside the media query and so the dropdown elements were showing when on a screen that was smaller instead of being hidden, you also had the deceleration of the background for the submenu elements in the media query.
.nav li ul
{
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul
{
display: block;
}
.nav li ul li
{
display: block;
background-color: #282828;
}
Updated fiddle
I am trying to make a three tiered CSS style menu.
Jsfiddle here : https://jsfiddle.net/kBVYD/1/
What I need to accomplish is to have the third tier of the menu to stay aligned with the parent menu. When you hover over menu item A, Menu B dropsdown. When you hover over the menu items in the dropdown they show a third dropdown to the right of Menu B.
Right now the third menu (products) when hovered is floating to the left, and it should be droping down under the initial menu item.
<div class="full_width">
<div class="wrapper">
<div class="page-wrap">
<ul class="dropdown">
<li>HOME</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
You just need to make the second tier relative and left: 0.
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 0%;
}
https://jsfiddle.net/kBVYD/34/
I think this is what you want: Fiddle
You need the parent of the last menú (the "li") to NOT have position relative so the last menu absoluted position won't depend on the parent.
The as you have fixed values it's easy to set the submenu right where you want with 5px top (the margin of the first submenu with the main menú and the just a value for the left position, in this case 180px).
basically I've just added this to the fiddle:
.sub-menu > li {position:static !important;}
.sub-menu ul {top:5px !important; left:180px !important; }
Edited: the !important is just to overwrite your css's in the fiddle. You may better implement this attributes insteed of the others for a cleaner css sheet.
I have being trying to find a solution with a menu i have on a custom html website that it is not appearing but i can't for some reason find a solution and i'm quite curious what i'm doing wrong.
<div class="header_area fix" id="header">
<div class="header_top fix">
<div class="left_logo floatleft fix">
<img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" />
</div>
<div class="main_menu floatright fix">
<button style="floatright" id="mobile_button">Menu</button>
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">Stoves
<ul>
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul>
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div>
</div>
You can check the website here
The site is a for a client of mine he said he added some extra menu option without touching the css and then the menu broke. More importanly the dropdown of the menu is not appearing and i was trying to make come the surface with some display:block or z-index with no luck.
Also he has add a PHP CMS called Couch which is adding tag.
To give you a better idea the following code as actually a snippet and it is located in a most likely cms path "editor/snippets/header"
.main-menu>ul>li>ul {
position:absolute;
}
Your Menu Has a Dropwown but it is not hidden , so it takes some space. and the header has oveflow hidden, so the menu is becoming hidden entirely.
Add this css and your menu will be shown,
but you need to add code for dropdown to work.
This CSS is all kinds of jacked up.
The issues:
overflow: hidden on the .fixed element is causing the text to disappear.
As far as I can tell, there's no CSS that displays the drop down lists on hover
The drop down lists aren't hidden, so they're taking up space forcing the main list out of the nav bar
There's still list-style-type:disc for the li elements
I'll fiddle with it for a minute, but those are the issues.
Update I fiddled with the CSS and got the dropdowns to display. You'll have to make them look pretty with some CSS, but they're working. Yeah, it's kind of hacky, but I did what I could with the 5? CSS sheets all competing for screen time.
/* menu extra css */
.dropdown:hover .dropdown-hidden {
display:block;
}
.dropdown-hidden {
float: none!important;
display: none;
position: absolute;
z-index: 99999999;
left: 0px;
background: #fff;
}
.dropdown-hidden li {
display: block;
float: none!important;
position: relative;
}
.fix {
overflow: inherit!important;
}
li {
list-style-type: none;
}
-
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">
Stoves
<ul class="dropdown-hidden">
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul class="dropdown-hidden">
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
Can someone tell me how I can have text in line with five links please in my menu using html and css?
The current code is
<div class="menu content">
<ul id="nav">
<h1>JEWLLERY</h1>
<li>Home
</li>
<li>Jewellery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
<li>Reviews
</li>
</ul>
</div>
<!-- end of menu -->
I want the "JEWELLEY" to be on the left side with the links following, thanks.
The Content is in the menu bar at the top of my website.
I want the menu to appear as
JEWELLERY HOME Jewellery Locations Contact Us Reviews
However at present the links (home, jewellery, locations, contact us, reviews) are displaying below "JEWELLERY"
Thanks.
Try display property
h1, li{
display:inline-block;
}
Fiddle Demo
Another Scenario
In this, you have to pick out <h1>JEWLLERY</h1> from the <ul>
h1{
float:left; // can be replaced by display:inline-block; and vertical-align:top;
}
ul{
display:inline-block;
}
Updated Demo --> http://jsfiddle.net/U2PPu/1/
Note: I'm using both display:inline-block and float:left property just to make you familier with both rules, otherwise display:inline-block is enough.
#nav
{
list-style:none;
}
#nav li
{
float:left;
}