How can I make the submenus "PROGRAMMATION" and "RÉSEAUTIQUE" visible when the mouse is hovering over the link of the parent "MON PROGRAMME"?
This is the html code:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<div class="sousMenu">
<li><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
</div>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And here is my CSS code:
.sousMenu:hover li a > li ul li
{
display: block;
}
.sousMenu li ul li
{
position: absolute;
top: 40px;
display: none;
list-style-type: none;
}
Change your HTML to this:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<li class="sousMenu"><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And your css to this:
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
top: 40px;
display: none;
list-style-type: none;
}
You can see it works here: http://jsfiddle.net/AuJeF/
Related
I want to make a submenu for a submenu and also change the background color of main menu and background color on hover of submenu. This is my code, what changes should I make? The green background is not visible in submenu and also the submenu of submenu.
#horizontalmenu ul {
padding: 1;
margin: 1;
list-style: none;
}
#horizontalmenu li {
float: left;
position: relative;
padding-right: 100;
display: block;
border: 4px solid #CC55FF;
border-style: inset;
}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li: hover ul {
display: block;
background: red;
height: auto;
width: 8em;
background-color: green;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
Html
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
<li>Pakistaan</li>
</ul>
</li>
</ul>
</div>
This is what it looks like:
How would I correctly vertically align the navigation with the logo?
HTML:
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}
You can add a display method named table to the ul tag and then include a display method table-cell with vertical-align:middle to effectively, vertically align your links to the logo.
HTML:
<div class="menu-nav">
<ul class="a">
<li>Logo
</li>
<li class="navItem">Home
</li>
<li class="navItem">Chat Now
</li>
<li class="navItem">Mobile Chat
</li>
<li class="navItem">Report User
</li>
</ul>
</div>
CSS:
.a{
display:table;
}
.a li{
display: table-cell;
vertical-align:middle;
}
Which is better seen through this JSFiddle
EDIT:
You can update your margin by giving the li tags a class and calling that specific class. This can also be found in the JSFiddle above and you can play with it a bit as well.
Please try below code i have just added line-height:60px; for .menu-nav ul li a
HTML :
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
line-height:60px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}
I want to make my navigation bar with dropdown, but there is always distance on left side of the div dropdown. How do I remove that distance?
Here is the code of the navigation bar:
.navbar {
background-color: #6b6b6b;
margin:10px;
}
.navbar ul {
display: inline;
color: white;
font-family: "Agency FB";
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
font-size: 24px;
}
.navbar ul li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar ul li:hover {
background-color: #cccccc;
}
.navbar ul li ul {
display: none;
position: absolute;
margin-left:-10px;
margin-top:5px;
background-color:white;
color:#6b6b6b;
padding-left:-20px;
font-size:20px;
}
.navbar ul li ul li {
display: block;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
And here is the code of html navigation bar (without link):
<div class="navbar">
<ul>
<li>
Home
</li>
<li>
Category
<ul>
<li>Batik</li>
<li>Party</li>
<li>Office</li>
<li>Casual</li>
<li>Sport</li>
</ul>
</li>
<li>
Information
<ul>
<li>
About Us
</li>
<li>
Cara Belanja
</li>
<li>
Our Location
</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
Thanks before :)
I remade it for you kinda, I'm sure you'll get the jist of it
<div id="nav">
<ul>
<li>Home</li>
<li>Category
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Information
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/un64F/3/ for css
I'm not sure I understand what you are asking for exactly but does adding padding-left: 0; to the .navbar ul style have the effect you want?
I have a simple css dropdown menu but the sub menus don't seem to drop right below their parent menu. Here a link to what it currently looks like.
DEMO
Please help. Thank you.
********* here is the html**********************
<header>
<table>
<td>
<h1>Header</h1>
<nav>
<ul>
<li>menu1
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu3
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu4
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</nav>
</td>
</table>
</header>
************** here is the css ************************
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
header {
position: absolute;
top:0;
width: 100%;
border: 1px solid black;
}
header h1 {
display: inline-block;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
}
nav ul ul li a{
display: block;
}
nav li ul {
display: none;
}
nav li:hover ul{
display:block;
}
nav ul ul li{
display:block;
}
You just need a couple small changes to make the nested uls appear relative to their parent li:
nav li {
display: inline;
position: relative;
}
nav li ul {
display: none;
position: absolute;
padding: 0;
}
I've been able to create a horizontal menu using (display:inline) and I now have a drop menu thanks to sousMenu. My problem is that all the submenus, regardless of element I hovered over, appear in the same place. How do I work around this?
My menu code thus far:
<ul>
<li>Home</li>
<li class="sousMenu">About Us
<ul>
<li>Board of Directors</li>
</br>
<li>Student Profiles</li>
</br>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul>
<li>Donations</li>
</br>
<li>Job Board</li>
</br>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul>
<li>Connections</li>
</br>
<li>Gallery</li>
</br>
<li>Tours</li>
</ul>
</li>
CSS:
#navcontainer ul {
/*margin: 0;*/
margin-left: auto;
margin-right: auto;
padding: 0;
top:180;
right:20;
width:800px;
list-style-type: none;
text-align: center;
position: absolute;
color: #fff;
background-color: #003300;
padding: .2em 1em;
}
#navcontainer ul li {
display: inline;
padding-left:2cm;
}
#navcontainer ul li a {
text-decoration: none;
color: #fff;
background-color: #030;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
text-align: center;
display: none;
list-style-type: none;
}
Try setting the parent list item to position: relative and the child ul to position: absolute for starters. I made some other slight modifications to your code to achieve the desired effect.
Here's the CSS:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}
.main li:hover > ul {
display: block;
}
ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}
ul.sub li {
display: block;
}
I also cleaned up the HTML a bit. You were missing a closing </ul> tag as well:
<ul class="main">
<li>Home</li>
<li class="sousMenu">About Us
<ul class="sub about">
<li>Board of Directors</li>
<li>Student Profiles</li>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul class="sub get-involved">
<li>Donations</li>
<li>Job Board</li>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul class="sub resources">
<li>Connections</li>
<li>Gallery</li>
<li>Tours</li>
</ul>
</li>
</ul>
Here's the fiddle: http://jsfiddle.net/vXhZb/2/