Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help
<div class="nav-collapse collapse">
<ul id="nav-list" class="nav pull-right">
<li>Home</li>
<li>About</li>
<li>Updates</li>
<li>Screenshots</li>
<li>How to</li>
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
<li>Permissions</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
I want to have dropdown list for my submenus.My menu is horizontal at the moment
To get you started...
.nav li ul { display: none; }
.nav li:hover ul { display: block;}
Your HTML needs a minor edit also... You need to nest the sub-menu <ul> inside the parent <li>. Like below:
<li>How to
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":
http://jsfiddle.net/Zuvdf/
Related
My HTML code:
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
If I write
nav ul li a:hover{}
It will create hover for all links.
How to create sentence that first link "Link1" will have different hover?
Use :first-child pseudo-selector
nav ul li:first-child a:hover {
color: red
}
<nav>
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</nav>
I have a top bar navigation and need a single item and its dropdown to have a different background colour from the rest. I have managed to change the background colour of the item but cannot change its dropdown. I have figured out how to change the drop menus for all items and I have tried all different variations to get this to work with the single item but nothing works.
Can anyone help?
Just to clarify, I am trying to select the dropdown on the right hand side with the id of account and class of top-bar-colour. Thanks
NB: I am using foundation 5. I originally had that info in the title but someone deleted it, not sure why :/
.top-bar-section .top-bar-colour {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns
.top-bar-section li a.top-bar-colour .dropdown li a { background-color:red} //this doesn't work either
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><i class="fi-home medium"></i></li>
<li class="has-dropdown">
menu
<ul class="dropdown">
<li>Dropdown Level 1</li>
<li>Dropdown Option</li>
<li>Dropdown Option</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown" id="account">
<i class="fi-torso medium"></i>
<ul class="dropdown"><li>Login</li></ul>
</li>
</ul>
</section>
</nav>
Assuming you want to change the color of the bar and drop down of the first one you can use this css
.top-bar-section .left .dropdown li a {background-color:red}
Let me know if my assumption is right
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
how to float third child menu to left?
i want to float 3rd child menu to left like the main menu "item1"
html
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1
<ul class"right-menu">
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
You can target the 3rd child in CSS using the :nth-child syntax.
CSS
#nav ul li ul li:nth-child(3)
However if you want something that will be supported in all browsers I tend to use the adjacent sibling selector or "+".
In your example the css would be:
#nav ul li ul li + li + li {
float:left;
}
Although i would recommend using some classes so that you can reduce the huge number of selectors requires to do this.
I am experiencing difficulties in enabling the visibility of a class when I hover over its parent class in CSS. i.e. I want to enable the submenu class on hover effect over the menu class.My html code for this is as follows:
<li class="menu">Link</li>
<ul class="subMenu">
<li>Link A</li>
<li>Link B</li>
<li>Link C</li>
</ul>
And the corresponding css is as follows :
.subMenu
{
display:none;
visibility:hidden;
}
.menu:hover .subMenu
{
display:inherit;
visibility:visible;
}
Now I have difficulties with the hover effect.
You need to add the sub menu ul inside the main li. Currently it is outside the li so it is not visible on hover.
Change your html like this
<ul>
<li class="menu">Link
<ul class="subMenu">
<li>Link A</li>
<li>Link B</li>
<li>Link C</li>
</ul>
</li>
</ul>
DEMO