I have looked though this site and found various answers, but none worked for me or I didn't know what to do exactly. Whenever I hover over the menu, the main content get pushed down & when I add "position:absolute" (I've tried some places^^), the whole menu gets deactivated or disappears enirely.
I have a blogger site and use a template from here: http://www.5202.de/2012/10/avantgardistisches-simple-wei-layout.html --> Download.
Please consider, when posting an answer, that I'm a total newbie in coding,and need very precise info;) I've made the menu with a generator, but I'm quite happy with it apart from that problem.
I really hope you can help and I think other newbies would benefit from an easy to understand/implement answer, too:)
Heres the css:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list- style:none;float:left;margin:0;width:9em;position:relative;}
ul#main-nav li a {text- decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border- left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border- left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}]]>
Not sure about the Page list belonging, but anyways.
Now here's the html
<ul id="main-nav">
<li>Home</li>
<li>About
<ul>
<li>Me</li>
<li>This blog </li>
<li>Ressources</li>
<li>Legel stuff </li>
</ul>
</li>
<li>Photography
<ul>
<li>Projects</li>
<li>Equipment </li>
<li>Questions</li>
</ul>
</li>
<li>Scrappy Art
<ul>
<li>Scrapbooking </li>
<li>Art Journals </li>
<li>Mixed-Media </li>
<li>Crops & Co. </li>
</ul>
</li>
<li>DIY </li>
<li>Freebies
<ul>
<li>Free Stuff</li>
<li>Free Tutorials</li>
<li>Terms of Use </li>
</ul>
</li>
<li>Favorites
<ul>
<li>Blogging Friends </li>
<li>More Faves </li>
</ul>
</li>
<li>Features
<ul>
<li>Wonderland </li>
<li>Smashbook</li>
<li>Photo- Tips</li>
<li>Books</li>
<li>Lost Places </li>
</ul>
</li>
<li>Travel
<ul>
<li>La Gomera</li>
<li>London</li>
<li>Wroclaw</li>
</ul>
</li>
<li>Contact </li>
</ul>
How about you call the menu from another file (header) and set the background transparent make sure the body section overlaps the header when the drop down happens.
find ul#main-nav li ul {padding:0;margin:0;display:none;}
and change like this
ul#main-nav li ul {
padding:0;margin:0;
display:none;
position:absolute:/*Added*/
z-index:2;/*Added*/
}
You can change position of your child ul by giving position like top:10px;left:10px; etc
Working Demo Here
Related
I am trying to edit our space in confluence and add a navigation menu globally in our space. I am doing this at the very top of the page instead of doing a page tree becase we can't touch the side bar (government standards). Anyway, I did a horizontal navigation menu at the top of the header page. I put it in Space tools -> look and feel -> sidebar, header, footer. I pasted my HTML and CSS code in the header part.
This works fine except for one problem: When I highlight the menu in order to bring up the sub menu, it is not overlaying properly. Part of the page covers the sub menu. I attached a couple of screenshots on what I mean.
Any workaround in order to make this work? I tested this on just pure HTML without confluence and there is no problem there. I am still designing the navigation bar so don't judge ;)
Edit: Also, on the first pciture, when I try to hover past "Hardware Support" which is the one with the arrow pointing, the sub menu disappers. It would not go past it.
Here is the HTML:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul.color
{
background-color: #3572B0;
border-radius: 3px;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li:hover
{
background:#2A67A5
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
background:#3572B0;
}
<h1>Contracts Department</h1>
<nav id="primary_nav_wrap">
<ul class="color">
<li class="current-menu-item">Home</li>
<li>Latest Announcements</li>
<li>SSC PAC Centerwide Contracting Strategy</li>
<li>Items of Interest</li>
<li>Contracts Department
<ul>
<li>Policy & Procedures
<ul>
<li>SPAWAR Instructions</li>
<li>Checklists Repository</li>
<li>Local IPMs, IBBs, PCIBs, & CIBs</li>
<li>Policy Communication Methods</li>
</ul>
</li>
<li>Acquisition Regulations & Guidance</li>
<li>Forms & Tools</li>
<li>Internal Self Assessments</li>
<li>Workforce Management & Development
<ul>
<li>Competency Training</li>
<li>Information Forum</li>
<li>PR/Market Research/JNCP Training</li>
<li>Presentations and Supplements</li>
<li>PWS/SOW & WAWF Training</li>
<li>SPAWAR e-Commerce Central Training</li>
</ul>
</li>
</ul>
</li>
<li>Large Contracts
<ul>
<li>Acquisition Planning</li>
<li>Pre-Award</li>
<li>Post-Award</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>Simplified Acquisition
<ul>
<li>Checklist</li>
<li>Required Forms and Memos</li>
<li>Guidance</li>
</ul>
</li>
<li>Purchase Card
<ul>
<li>About</li>
<li>Instructions</li>
<li>Desk Guides</li>
<li>Forms</li>
<li>PCIBs</li>
<li>Purchase Card Training</li>
<li>Assignment of APCs to AOs</li>
</ul>
</li>
<li>Customers
<ul>
<li>General Information</li>
<li>Large Contracts Guidance
<ul>
<li>Acquisition Planning</li>
<li>Pre-Award</li>
<li>Post-Award</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>Simplified Acquisition Guidance
<ul>
<li>Checklists</li>
<li>Required Forms and Memos</li>
<li>Guidance</li>
</ul>
</li>
<li>CDRL</li>
<li>Checklist Repository</li>
<li>Contracts Information Bulletins (CIBs)</li>
<li>Center Wide Contracts</li>
<li>Government Furnished Property (GFP)</li>
</ul>
</li>
<li>CORs</li>
<li>Navy ERP Material Management</li>
<li>IT Support (ITAG)
<ul>
<li>Introduction to IT Support</li>
<li>New Employee Resources</li>
<li>Microsoft Office</li>
<li>Hardware Support</li>
<li>Network Drives</li>
<li>Adobe Acrobat</li>
<li>SPS/PD²
<ul>
<li>Desk Guide</li>
<li>Integrity Tool</li>
</ul>
</li>
<li>Navy ERP</li>
<li>Laptops & Remote Connectivity</li>
<li>Important Websites</li>
<li>Misc.</li>
<li>Confluence/JIRA Issue Log</li>
<li>Document Management</li>
<li>Image Management</li>
</ul>
</li>
<li>Reserve a Resource
<ul>
<li>0607 Training Room</li>
<li>Conference Rooms</li>
<li>Vehicles</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div><h1>This is a sample to see if the navigation overlay is going to cause a problem</h1></div>
On small screens I have a hamburger menu that drops down to show a some list items. I am trying to add sub-menus onto some of these items.
I have tried multiple variations of inserting submenus but none appear. The regular hamburger dropdown functions fine but doesn't change at all when I add the submenus.
Here is the html without adding submenus.
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span> </label>
<ul class="menu">
<li>Getting Started</li>
<li>Property Information</li>
<li>Home Financing</li>
<li>Loan Approval</li>
<li>Loan Closing</li>
<li>Home Ownership</li>
</ul>
How would I add a submenu to this within one of those items?
Just add a ul inside the appropriate li block as below. You will need to play with the css to make it display appropriately.
HTML
<nav>
<ul>
<li>Getting Started</li>
<li>Property Information
<ul>
<li>Sub-Property Information</li>
<li>Sub-Property Information 2</li>
</ul>
</li>
<li>Home Financing</li>
<li>Loan Approval</li>
<li>Loan Closing</li>
<li>Home Ownership</li>
</ul>
</nav>
CSS
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
</style>
List:
<ul>
<li>
Item 1
<ul>
<li>
Item 1-1
<ul>
<li>Item 1-1-1</li>
<li>
Item 1-1-2
<ul>
<li><a href="#">Item 1-1-2-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Here's some relevant CSS
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
The first one will hide every drop down item. The second will match any ul that is a children of the parent #nav ul li:hover, if so display:block and the drop down is visible.
Now because when hovering a item, the items within will simply be listed below, this is not what I am looking to achieve. I want to move the Item 1-1-1 and Item 1-1-2 to be on the right of Item 1-1, the Item 1-1-1 needs to be on the right, Item 1-1-2 will be below it (acting as a drop-down list). I am not sure how I select that element.
Example: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
Here's what I got so far:
http://jsfiddle.net/Gq8C2/
I tried with first-child, such as:
#nav ul li:hover > ul li:first-child {
display: block;
}
I also tried using position absolute and relative, It almost gave me the result I wanted, but I wasn't able to grab the first item...
There must be a better way of doing this...
How do I select it? And how do I make a similar behavior to that I've been describing above?
Why don't you just use the css/html of the page you linked to instead of trying to reinvent it?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
CSS
Review this Fiddle http://jsfiddle.net/Gq8C2/10/
I use position:absolute for the sub-sub menu :
#nav ul li ul li ul {
position:absolute;
top:0;
left:100%;
}
In order to upgrade your code you can assign a class for each level of the menu like
<ul class="Third_level">
I'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...