I am using menu from UI
I have this ul
<ul id="menu">
<li>Loans</li>
<li>
Bancassurance
<ul>
<li>Aman el darb</li>
<li>Aman el elem</li>
<li>Aman el ghad</li>
</ul>
</li>
<li>
Services
<ul>
<li>Audi Mobile</li>
<li>Pin-Pay</li>
<li>ADSL Services</li>
<li>Bill Payment</li>
<li>Internet Accesses</li>
</ul>
</li>
<li>
Accounts
<ul>
<li>Wedding Account</li>
<li>Payroll Account</li>
<li>Saving Account</li>
<li>Current Account</li>
</ul>
</li>
</ul>
My CSS :
.ui-menu-item { }
This select all li from <ul id="menu">
How should the css selector look like so I can select the submenu `ul inside of #menu
According to your script use this .ui-menu-item #menu ul{ }
You can write like this
#menu ul li a{ css here}
DEMO
or
#menu ul li{ css here }
DEMO 2
If I am understanding your question correctly, you will need this
#menu ul {
}
If you need to target a specific UL inside of #menu, you should add an ID or Class to that particular UL and then reference it with this
#menu #example {
}
You can take it a step further and target each LI in the same fashion, like this
#menu #example li {
}
Hope this helps!
Selecting the UL inside of #menu is pretty simple:
#menu ul { /*CSS HERE*/ }
Related
This question already has answers here:
How to make a <ul> display in a horizontal row
(9 answers)
Closed 1 year ago.
I am trying to create a menu using html, I have added my link in an unordered list (ul) has shown below. In my css i added a display:inline; to the links so that they would display in a link like a menu but for some reason it doesn't seem to work.
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li a {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
You are targeting the anchors, which are already inline by default. I believe you mean to target the list items:
#menu ul li {
display: inline;
}
JSFiddle
You were very close!
The only thing wrong with your code, is that display: inline; should be on your <li> elements instead of your <a> elements :
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
(see also this Fiddle)
Try this: ul li { float: left; padding-right:10px; }
https://jsfiddle.net/n4aak3nk/1/
got an html list working as a dropdown menu with CSS when you hover through a < li > element like "Products" in my example. But what I want is the same effect when hover through < h3 > like "Contact" from my example. Is it possible?
Here's the html:
<h3>Contact</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
And the CSS code:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
Thank you very much in advance.
On hover you can only control the CSS of the element you hover over, or the CSS of elements within the element you hover over (one of its children).
So you can not make the ul change styles when you hover over the h3 because they 1) are not the same object and 2) do not have a parent-child relationship (they are siblings).
To show the menu when hovering over the h3, you can wrap both of them inside another object (div) and use this for the hover event. To distinguish between the two hovers you can add classnames to both the uls.
See this JSfiddle, or the code below:
<div class="container">
<h3>Contact</h3>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="submenu">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
.container ul{
display: none;
}
.container:hover ul.menu{
display: block;
}
ul li ul.submenu {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
In short - you should nest ul inside the h3
<h3>
Contact
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</h3>
And in your css:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
h3 > ul {
display: none;
}
h3:hover > ul {
display: block;
}
Here's the demo: https://jsfiddle.net/mscehjLf/1/
The sub categories in my menu are always visible, even though their display is set to none. What am I doing wrong?
http://codepen.io/MrAxlee/pen/QwyVMJ
<header id="header">
<!-- Logo -->
<h1 id="logo">MrAxlee</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home
<ul>
<li>Intro</li>
<li>What I do</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</li>
<li>Blog</li>
<li>Tutorials
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</nav>
</header>
And the CSS
#nav ul li ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
"il" is not "li" :-)
this woks great:
#nav ul li ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
he also had troubles with FTP but now all is OK for him.
You have a typo in your css
#nav ul il ul {
display:none;
}
It should be #nav ul li ul :)
Check out This You misspell LI in
#nav ul il ul {
display:none;
}
http://jsfiddle.net/yufrfueo/
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
I have a <ul id="islist"> with the according css:
#islist {
list-style-image: url('../img/img.png');
}
#islist * li {
list-style-type: none;
}
Then, within this , there's another one:
<ul id="islist">
<li>title</li>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</ul>
The problem is that all <li> elements have the image setup, not only the title.
How can I solve this?
Your html is invalid you cant have a ul as a child of a ul, place the ul in an li and then the styles will be applied to the nested lis.
<ul id="islist">
<li>title</li>
<li><ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</li>
</ul>
also I think you want to use list-style: none; instead of list-style-type:none;
DEMO
The problem is that the style is applied to the ul, not to the li.
Change the CSS as follows:
#islist {
list-style-image: url('../img/img.png');
}
#islist ul {
list-style-type: none;
}