For some reason I cant get my pure css drop menu to work. I have tried everything I can think of but to no avail. I know it has to be something small or I am missing a descendant selector or something. Can anyone figure out this problem.
HTML
<div class="section navi">
<div class="row">
<div class="col_06">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Practice Areas</li>
<li>Mediation & Arbitration</li>
<li>Attorneys</li>
<li>Offices</li>
<li><a href="/"><span>▼</span>More
<ul class="subNav"></a>
<li><a>News & Accolades</a></li>
<li><a>Careers</a></li>
<li><a>Administration</a></li>
<li><a>Disclaimer</a></li>
<li><a>Community</a></li>
<li><a>The Harmonie Group</a></li>
<li><a>Reported Cases</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav ul{
background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span>
background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
list-style:none;
position:absolute;
left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
}
#nav ul li{
padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
float:none;
}
#nav ul a{
white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
}
#nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
}
#nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
text-decoration:none;
}
#nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
background:#333;
}
All those <span>elements in your CSS are breaking it. HTML elements ruin your CSS. To comment use a /*I am a comment*/ Remove all of the <span>'s and your drop down works great:
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
JSFIddle Demo
You have HTML code in your CSS. Remove the tags.
Related
Looking to find out how to change a single nav link to have a different background hover color than the others.
I've tried #nav #contact.hover and #nav #contact:hover to no avail.
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
</html>
CSS:
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li a:hover {
background-color:black;
}
Should change the contact element in the nav to have a background hover color of white
Just have to get the selector right. I think you were having issues because your base style for hover is overly specific which trumps most overrides.
#nav ul li:hover a
...could easily be changed to simpler selector that would be easier to override, the use of ID's instead of classes adds to the specificity issue as well.
.clearall {
clear:both;
}
#nav {
background:#333;
}
#nav ul li {
float:left;
margin-right:0px;
}
#nav ul li a {
color:#fff;
text-transform:uppercase;
padding:10px 20px;
display:block;
text-decoration:none;
}
#nav ul li:hover a {
background-color:black;
}
#nav ul li#contact:hover a {
background: url('https://picsum.photos/100');
}
<div id="nav">
<ul>
<li id="home">Home</li>
<li id="service">Service</li>
<li id="parts">Parts</li>
<li id="contact">Contact</li>
</ul>
<div class="clearall"></div>
</div>
You can accomplish this by using the :last-child psuedo-class in your CSS.
Here's a codepen with the fix but I'll describe below what I did: https://codepen.io/Athys/pen/WBdYdZ
I added :last-child to the li selector since the "contact" link appears as the last list item (the last li). Then, I added a :hover psuedo-class to the a selector and give it a different hover color and text-color than the other a elements. Hope this helps.
I'm building a navigation and inside of my ul list there is another sub-list:
<ul>
<li>Cooking
<ul>
<li>Fantasy</li>
<li>Meal</li>
<li>Difficulty</li>
</ul>
</li>
<li>other li</li>
</ul>
I basically want it so that every time I hover over the different li elements (fantasy-meal-difficulty) an icon at the bottom of the ul-list appears.
I'm using ul::after to place these icons. The only problem is that they should change when hovering a different li.
How should I select them?
Is there any kind of way to select the ul::after + li:nth-child(1)?
Also, I can't modify my HTML because I'm building a theme for WordPress.
looking for something like this? https://jsfiddle.net/txcbdu0f/1/
ul.menu li:after{
content:"";
width:10px;
height:20px;
display:inline-block;
background:#ccc;
position:absolute;
bottom:-50px;
left:0;
opacity:0;
}
ul.menu li:hover:after{opacity:1;}
ul.menu li:first-child:hover:after{background:#000;}
ul.menu li:nth-child(2):hover:after{background:#ccc;}
ul.menu li:last-child:hover:after{background:red;}
ul.menu{position:relative;}
I have updated your js fiddle for hover list:
https://jsfiddle.net/txcbdu0f/2/
ul ul.menu {
display: none;
}
ul > li:hover > ul.menu {
display: block;
}
Hope you are looking for this simple idea.
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
i have written a css code for my drop down menu
PROBLEMS WITH MY DROP DOWN MENU ARE ::
when i hover on my main menu item(i.e. in the exapmle 2nd one "bbbbb") it displays the submenu...thats ok..but its appearing with in the main menu by increaing its height
the background of main menu becomes the background of sub menu too,obviously i dont want that
in main menu list items starts with lot of text-inedent,i dont want that
text are aligned right in submenu
i want content width for sub menu not more than that
MY HTML ::
<div class="menu">
<ul>
<li>aaaaaaaaaa</li>
<li>bbbbbbbbbb
<ul>
<li>aaaaaaaaaa</li>
<li>bbbbbbbbbb</li>
</ul>
</li>
</ul>
</div>
my css::
.menu{
width:70%;
overflow:hidden;
background:green;
position:relative;
}
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}
and please explain my mistake
HERE IS MY FIDDLE
You have to make some changes in the code.
Fiddle
css
.menu{
width:70%;
background:green;
position:relative;
}
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;
position: absolute; margin: -2px 0 0 0; z-index: 11110;}
.menu ul li:hover ul li{ float:none; height:20px; }
Updated Fiddle
Changes:
display: inline-block; occupies the combined width of the inner container.
position:relative; using it in menu will cause increase in the height of the outer container.
you can read it at w3school
is this what you want?
http://jsfiddle.net/vcMtv/2/
.menu{
width:70%;
overflow:hidden;
background:green;
position:relative;
}
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}