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
Related
I have to make a few changes to the menu of my company's website, including a dropdown menu. The thing is, our website is made with Prestashop, which kind of messed up the hierarchy of the HTML. It pretty much looks like this:
<ul class ="menu">
<li>
<a href="" class="sf-with-menu">
<ul class ="submenu">
<li>
<a href="">
</li>
<li>
<a href="">
</li>
</ul>
</li>
</ul>
I want to have the ul with the class .submenu open when I hover on .sf-with-menu, which are both at the same level in the page's hierarchy. Is that possible only with CSS? I'm very limited with Prestashop regarding the HTML, since I've read changing the HTML would basically break everything when we update our modules, so I'd like to stick to CSS only if possible.
I suppose you could use the + selector, which selects "elements that [are] placed immediately after (not inside) the first specified element," like this:
<ul class ="menu">
<li>
Anchor
<ul class ="submenu">
<li>
<a href="">One
</li>
<li>
<a href="">Two
</li>
</ul>
</li>
</ul>
<style>
.submenu {
display: none;
}
.sf-with-menu:hover + .submenu {
display: initial;
}
</style>
This applies the styles to every instance of .submenu placed immediately after .sf-with-menu, when hovering over .sf-with-menu.
It will only highlight the first instance though, as you can see in this demo, so if you have the structure:
.menu
li
.sf-with-menu
.submenu
// stuff in menu
.submenu
// stuff in menu
...then only the first submenu will be opened on hover.
See here for more CSS info.
I want to separate certain elements in a dropdown menu option, with a simple solid divider. Ideally I want to have the links 'Pinterest', 'Twitter', 'Bloglovin' and 'Instagram' to appear above this divider and the link 'Email' to appear below the divider. So essentially I'm separating the first half of links from the second half with a divider.
Below is the html coding to the dropdown menu:
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:blankesque#hotmail.com'>Email</a></li>
</ul></li>
The link to my site is as follows - http://www.blankesque.com.
Any help with this issue would be greatly appreciated. Thank you in advance.
Iram
Just target the last <li> in the social <li>(I added the class .social to it), with :last-of-type and add a border-top
.social li:last-of-type {
margin-top: 10px;
border-top: 1px solid grey;
}
<li class="social">Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</li>
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>
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.